jQuery Mobile CSS класс не применяется к полю ввода

Я хочу, чтобы класс .ui-input-text применялся к полю ввода. Но не применяется. Я использую класс jquery mobile для ввода текста. Радиус границы не меняется, если я не применил встроенный CSS. Вот мой кодjQuery Mobile CSS класс не применяется к полю ввода

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Login</title> 

    <style type="text/css"> 
     @font-face { 
      font-family: 'RNS Camelia'; 
      font-style: normal; 
      font-weight: normal; 
      src: local('RNS Camelia'), url(http://localhost/codeigniter/fonts/RNS_Camelia.otf); 
     } 

     .ui-btn { 
      width: 40% !important; 
      height: 15px !important; 
      border-radius: 50px !important; 
      text-align: center !important; 
      background-color: #D6DE23 !important; 
      font-family: 'RNS Camelia', serif !important; 
     } 

     .login_button { 
      margin-left: 20px !important; 
      text-align: center !important; 
     } 

     .ui-page { 
      background-image: url('../codeigniter/images/background.jpg') !important; 
      width: 100%; 
      background-size: 100% 100%; 
      background-repeat: no-repeat; 
     } 

      .ui-input-text { 
      border-radius: 50px !important; 
     } 

     .user_pass { 
      text-align: center!important; 
      color: white!important; 
      font-family: 'RNS Camelia', serif!important; 
      font-size: 16px!important; 
      height: 20px!important; 
     } 

     .text_input_wrap { 
      margin-right: 15px !important; 
     } 

     .bottom_links { 
      color: white!important; 
      font-family: 'RNS Camelia', serif!important; 
      text-decoration: none !important; 
     } 
    </style> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script> 
</head> 

<body> 
    <div data-role="page"> 
     <div class="ui-content" data-role="main"> 
      <img border="0" src="<?php echo $this->config->base_url();?> images/logo_only.png" alt="Logo Bar Express" style="margin:0px;width:313px;display:inline;height:142px;float:left;" /> 
      <div style="clear:both;"></div> 



      <div class="ui-grid-b"> 
       <div class="ui-block-a"> 
        <div class="user_pass">Username</div> 
       </div> 
       <div class="ui-block-b"> 
        <div class="user_pass">Password</div> 
       </div> 
      </div> 

      <div class="ui-grid-b"> 
       <div class="ui-block-a"> 
        <div class="text_input_wrap"> 
         <input type="text" id="username" name="username"> 
        </div> 
       </div> 
       <div class="ui-block-b"> </div> 

      </div> 


      <input type="password" id="password" name="password"> 

      <div class="ui-grid-solo"> 
       <div class="ui-block-a"> 
        <div class="login_button"> 
         <input type="submit" value="LOGIN"> 
        </div> 
       </div> 
      </div> 



     </div> 
    </div> 

</body> 

</html>

источник

2015-03-11 Adrian L Perez

Кажется, что работает здесь: http://jsfiddle.net/397sd7zL/. Просто скопировал и вставил ваш код. – dowomenfart

Поля ввода должны иметь тот же радиус границы, что и кнопка регистрации. Это не происходит. –

кнопка входа в систему .ui-input-btn не текст. ui-input-txt помещается в текстовые поля. Вот почему вы не видите этот граничный радиус. – dowomenfart

Здесь делают этот кусок кода в нижней части вашей собственной таблицы стилей.

FIDDLE Demo

.ui-input-text{ 
    border-radius: 50px; 
}

источник

2015-03-12 17:21:19 dowomenfart

Я загрузил мою таблицу стилей извне с помощью css в разделе главы, и я обнаружил, что впереди появился дополнительный символ .ui-input-text, который дает ошибку. –

Переместить <style> блок на свой body из Head секции. Почему, поскольку jquery mobile использует ajax, он ничего не загрузит с Head.

Подробнее here

источник

2015-03-11 13:17:04 Hareesh

Это не работает, я думаю, имеет отношение к jQuery mobile. –

обновил мой ответ – Hareesh

Спасибо за ввод. Но это относится к css в голове, загруженной после того, как страница была создана или загружена в первый раз, когда страница не загружается в первый раз, когда это происходит. –

jQuery Mobile CSS класс не применяется к полю ввода

ответ

Смежные вопросы