s2k s2k - 2 months ago 76
CSS Question

How to change the input field's text color in MaterializeCSS?

How can I change the text color entered into the

input-field
of
MaterializeCSS
? The documentation demonstrates how to change the color of labels or the underline, but not the color of the text.

/* 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;
}


The documentation also states that it's possible to modify the
sass
variables:


Here is a CSS template for modifying input fields in CSS. With Sass,
you can achieve this by just changing a variable. The CSS shown below
is unprefixed. Depending on what you use, you may have to change the
type attribute selector.


But does not clarify which
sass
variables are available to change.

Answer

Simply select the input field's wrapper <div> by it's CSS class for changing the text color.

.input-field {
     color:orange;
}  

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

For changing the placeholder text color see: Change an input's HTML5 placeholder color with CSS

Concerning SASS: It looks like there is only a global text color defined in Materialize, which will by default also apply to your input fields. In _variables.scss you can find the $off-black variable which is responsible for the color. It's applied to <html> tag and changing it will therefore change the text color of your whole page.

Comments