Измените цвет ввода подчеркивания и метки в Materialize.рамки css

Я использую материализацию.CSS framework и я заметил, что цвет текста input поля зеленые, а также label.

есть ли способ, чтобы изменить цвет на что-то другое?

<input type="text" id="username" />
<label for="username">Username</label>
13
css html html5 materialize

4 ответов

вы можете, сообщает Материализовать Документы использование:

 /* label focus color */
   .input-field input[type=text]:focus + label {
     color: #000;
}
/* label underline focus color */
   .input-field input[type=text]:focus {
     border-bottom: 1px solid #000;
     box-shadow: 0 1px 0 0 #000;
   }

фрагмент

/*** !important was needed for snippet ***/



/* label focus color */
 .input-field input:focus + label {
   color: red !important;
 }
 /* label underline focus color */
 .row .input-field input:focus {
   border-bottom: 1px solid red !important;
   box-shadow: 0 1px 0 0 red !important
 }
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">
<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <i class="material-icons prefix">account_circle</i>
        <input id="icon_prefix" type="text" class="validate">
        <label for="icon_prefix">First Name</label>
      </div>
      <div class="input-field col s6">
        <i class="material-icons prefix">phone</i>
        <input id="icon_telephone" type="tel" class="validate">
        <label for="icon_telephone">Telephone</label>
      </div>
    </div>
  </form>
</div>
26

ответ dippas правильный, но если вы хотите, чтобы textareas был того же цвета, вы должны установить эти правила CSS:

/* label focus color */
    .input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
     color: #005eed !important;
    }

/* label underline focus color */
    .input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
     border-bottom: 1px solid #005eed !important;
     box-shadow: 0 1px 0 0 #005eed !important;
    }

Примечание .материализовать - правило textarea для нижней части метки и границы.

4

в документах говорится, как вы можете установить цвет материализации по умолчанию. Вам нужно скачать sass файлы в ваш проект, а затем вам нужно изменить эти переменные.

вам нужно перейти к /sass/components/forms/*/ чтобы установить необходимый элемент.

во всех элементах вы можете видеть, что цвет является $secondary-color, эту переменную вы можете найти в /sass/components/_variables.scss файл, и вы можете установить изменить его значение на свой цвет для всего вашего проекта.

1

для людей, спрашивающих, я сделал это: я назвал каждый вход с другим идентификатором, а затем, в мой css-файл, я поставил:

#ID1, #ID2, #ID3, #ID4, #ID5 {
 color: #111111;
 border-bottom: 1px solid #edeeee;
}

#ID1:focus, #ID2:focus, #ID3:focus, #ID4:focus, #ID5:focus {
 border-bottom: 1px solid #6E0000;
 box-shadow: none;
}

и используя это, я помещаю свои пользовательские цвета границы в фокус, а не в фокус.

0