Как я могу изменить цвет текста, введенного в input-field MaterializeCSS? В документации показано, как изменить цвет меток или подчеркивания, но не цвет текста.

 /* label color */
   .input-field label {
     color: #000;
   }
   /* 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;
   }
   /* valid color */
   .input-field input[type=text].valid {
     border-bottom: 1px solid #000;
     box-shadow: 0 1px 0 0 #000;
   }
   /* invalid color */
   .input-field input[type=text].invalid {
     border-bottom: 1px solid #000;
     box-shadow: 0 1px 0 0 #000;
   }
   /* icon prefix focus color */
   .input-field .prefix.active {
     color: #000;
   }

В документации также указано, что можно изменять переменные sass:

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

Но не уточняет, какие переменные sass можно изменить.

0
B Faley 3 Сен 2016 в 16:19

3 ответа

Лучший ответ

Просто выберите оболочку поля ввода <div> по его классу CSS для изменения цвета текста.

.input-field {
     color:orange;
}  

Fiddle: https://jsfiddle.net/Lxx2k0fq/

Для изменения цвета текста заполнителя см .: Изменить цвет заполнителя ввода HTML5 с помощью CSS

Что касается SASS: похоже, что в Materialize определен только глобальный цвет текста, который по умолчанию также применяется к вашим полям ввода. В _variables.scss вы можете найти переменную $ off-black, которая отвечает за цвет. Он применяется к тегу <html>, поэтому его изменение приведет к изменению цвета текста всей вашей страницы.

4
Community 23 Май 2017 в 12:01

Ответ Майкла мне не помог, но вот что я получил.

.input-field [type=text] {
    color: white;
}

Обязательно добавьте [type=text]

2
Zoe 17 Янв 2019 в 16:47
<input class="white-text" type="email" id="email" v-model="email">

Измените класс на любой цвет, который вы хотите

0
George Milroy 29 Май 2019 в 06:52