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


Tags: css,materializecss

Problem :

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 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.


    CSS Howto..

    How to draw a line with css and show text or image on it

    How to move an element styled by CSS stylesheet?

    How to make the height of a div within a master page expand in a content page?

    How to make CSS compatible with all browsers?

    How to make a div align with a specific td on the page?

    How to clip inside a box in css?

    How to Inherit grandparent CSS not parent?

    With css, how to ensure wrap on span boundary?

    How to crop SVG file within HTML/CSS

    How to translate this Silverlight control into HTML/CSS/JS

    responsive image gallery with different heights - how to achieve this with css (or jquery)

    How to do fallback for browser-specific css expressions

    How do you style Wordpress sub-menus with CSS?

    How to use the native browser outline in CSS?

    how to hide submenus in jquery menu

    How to add background-size in css based on image size?

    Jquery: how to get menu to expand towards the right instead of the left

    How to center an input tag in fieldset when using codeigniter?

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    How to make divs appear and disapear on hover in css?

    How can I render country flags as a ribbon, using CSS only?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    Div Title on div border how to [closed]

    How to make onmouseover on menu link change background image?

    How to share images between subdomains?

    how to set !important on a multi value css transform?

    How to change CSS element of data-pid using jquery

    How to find an element using Watir by inline css styles

    How to remove all CSS attributes in this situation

    How to solve this HTML/CSS bug? [closed]