Search code examples
cssmaterialize

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.


Solution

  • 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 HTML5 input's 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.