htmlformsmaterial-designmaterialize

Changing color of form element in materialize


How i change the color of form input element (text, password, label ,select ,text area) Label and border-bottom. ** i tried the style mention in materialize css documentation. But its not working.**

<div class="col s12 m6 l6 input-field" >
                <input type="text" name="user" id="user"  class="cng">
                <label for="user">User Name</label>
            </div>
            <div class="col input-field s12 m6 l6" >
                <input type="password" name="pass" id="pass">
                <label for="pass">Password</label>
            </div>

Solution

  • Use SASS

    Materialize's resources compile from .sass files, that color you are referring to can be edited from the variablies.scss file.

    Change:

    $secondary-color: color("red", "darken-1") !default;
    

    To whatever color you wish and compile the SCSS.

    Alternatively use the helper colors from here