2016-09-03 3 views
0

Как изменить цвет текста, введенный в input-field от MaterializeCSS? documentation демонстрирует, как изменить цвет меток или подчеркивание, но не цвет текста.Как изменить цвет текста поля ввода в 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 могут быть изменены.

ответ

2

Просто введите поле ввода <div> с помощью CSS-класса для изменения цвета текста.

.input-field { 
    color:orange; 
} 

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

Для изменения цвета текста замещающего см: Change an HTML5 input's placeholder color with CSS

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

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