在Materialise.css框架中更改下划线输入和标签的颜色

Question

I'm using the Materialize.css framework and I noticed that the color of the text input fields is green and so is the label .

Is there a way to change the color to something different?

<input type="text" id="username" />
<label for="username">Username</label>

Answer 1

You can, according to Materialize Docs by using:

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

Snippet

 /*** !important was needed for snippet ***/ /* label focus color */ .input-field input:focus + label { color: red !important; } /* label underline focus color */ .row .input-field input:focus { border-bottom: 1px solid red !important; box-shadow: 0 1px 0 0 red !important } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" /> <link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons"> <div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s6"> <i class="material-icons prefix">account_circle</i> <input id="icon_prefix" type="text" class="validate"> <label for="icon_prefix">First Name</label> </div> <div class="input-field col s6"> <i class="material-icons prefix">phone</i> <input id="icon_telephone" type="tel" class="validate"> <label for="icon_telephone">Telephone</label> </div> </div> </form> </div> 

Answer 2

The dippas answer is correct, but if you want textareas to be the same colour you have to set this CSS rules:

/* label focus color */
    .input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
     color: #005eed !important;
    }

/* label underline focus color */
    .input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
     border-bottom: 1px solid #005eed !important;
     box-shadow: 0 1px 0 0 #005eed !important;
    }

Note the .materialize-textarea rule for label and border bottom.

Answer 3

In the docs say how you can set the materialize default color. You need to download sass files into your project and then you need to change those variables.

You need to go to /sass/components/forms/*/ to set the element you need.

In all element you can see the color is the $secondary-color , that variable you can find in /sass/components/_variables.scss file, and you can set change its value to your color for all your project.

Answer 4

In case anyone is here in 2019 and trying this with the new version of Materialize (1.0.0) and not wanting to use !important in their css, the below snippet worked for me.

Note: This will apply to all input fields, if you want specific ones, ie text, then change [type] to [type=text].

    /* Inactive/Active Default input field color */
    .input-field input[type]:not([readonly]),
    .input-field input[type]:focus:not([readonly]),
    .input-field textarea:not([readonly]),
    .input-field textarea:focus:not([readonly]) {
        border-bottom: 1px solid #01579b;
        box-shadow: 0 1px 0 0 #01579b;
    }

    /* Inactive/Active Default input label color */
    .input-field input[type]:focus:not([readonly])+label,
    .input-field textarea:focus:not([readonly])+label {
        color: #01579b;
    }

    /* Active/Inactive Invalid input field colors */
    .input-field input[type].invalid,
    .input-field input[type].invalid:focus,
    .input-field textarea.invalid,
    .input-field textarea.invalid:focus {
        border-bottom: 1px solid #e57373;
        box-shadow: 0 1px 0 0 #e57373;
    }

    /* Active/Inactive Invalid input label color */
    .input-field input[type].invalid:focus+label,
    .input-field input[type].invalid~.helper-text::after,
    .input-field input[type].invalid:focus~.helper-text::after, 
    .input-field textarea.invalid:focus+label,
    .input-field textarea.invalid~.helper-text::after,
    .input-field textarea.invalid:focus~.helper-text::after {
        color: #e57373;
    }

    /* Active/Inactive Valid input field color */
    .input-field input[type].valid,
    .input-field input[type].valid:focus,
    .input-field textarea.valid,
    .input-field textarea.valid:focus {
        border-bottom: 1px solid #26a69a;
        box-shadow: 0 1px 0 0 #26a69a;
    }

    /* Active/Inactive Valid input label color */
    .input-field input[type].valid:focus+label,
    .input-field input[type].valid~.helper-text::after,
    .input-field input[type].valid:focus~.helper-text::after,
    .input-field textarea.valid:focus+label,
    .input-field textarea.valid~.helper-text::after,
    .input-field textarea.valid:focus~.helper-text::after {
        color: #26a69a;
    }

Snippet

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <style type="text/css"> .input-field input[type]:not([readonly]), .input-field input[type]:focus:not([readonly]), .input-field textarea:not([readonly]), .input-field textarea:focus:not([readonly]) { border-bottom: 1px solid #01579b; box-shadow: 0 1px 0 0 #01579b; } .input-field input[type]:focus:not([readonly])+label, .input-field textarea:focus:not([readonly])+label { color: #01579b; } .input-field input[type].invalid, .input-field input[type].invalid:focus, .input-field textarea.invalid, .input-field textarea.invalid:focus { border-bottom: 1px solid #e57373; box-shadow: 0 1px 0 0 #e57373; } .input-field input[type].invalid:focus+label, .input-field input[type].invalid~.helper-text::after, .input-field input[type].invalid:focus~.helper-text::after, .input-field textarea.invalid:focus+label, .input-field textarea.invalid~.helper-text::after, .input-field textarea.invalid:focus~.helper-text::after { color: #e57373; } .input-field input[type].valid, .input-field input[type].valid:focus, .input-field textarea.valid, .input-field textarea.valid:focus { border-bottom: 1px solid #26a69a; box-shadow: 0 1px 0 0 #26a69a; } .input-field input[type].valid:focus+label, .input-field input[type].valid~.helper-text::after, .input-field input[type].valid:focus~.helper-text::after, .input-field textarea.valid:focus+label, .input-field textarea.valid~.helper-text::after, .input-field textarea.valid:focus~.helper-text::after { color: #26a69a; } </style> </head> <body> <div class="input-field"> <input id="email" name="email" type="email" class="validate" required="required" autofocus> <label for="email">Email</label> <span class="helper-text" data-error="Must be a valid email" data-success="Perfect!"></span> </div> </div> <div class="row"> <div class="input-field"> <input id="password" name="password" type="password"class="validate" required="required" minlength="6"> <label for="password">Password</label> <span class="helper-text" data-error="Must have 6 or more characters" data-success="Perfect!"></span> </div> </div> <div class="row"> <div class="input-field"> <textarea id="textarea" name="textarea" class="materialize-textarea validate" required="required" minlength="6"></textarea> <label for="textarea">Textarea</label> <span class="helper-text" data-error="Must have 6 or more characters" data-success="Perfect!"></span> </div> </div> </body> 

Answer 5

finally, I found the solution. You need to change the color for active and not active.

ICONS:

.material-icons{
  color: #1a237e !important;
  }

.material-icons.active {
  color: #b71c1c !important;
  }

TEXT-FIELD:

.input-field input[type=text] + label, .materialize-textarea:focus:not([readonly]) + label {
 color: #1a237e !important;
}

.input-field input[type=text], .materialize-textarea:focus:not([readonly]) {
 border-bottom: 1px solid #1a237e !important;
 box-shadow: 0 1px 0 0 #1a237e !important;
}


.input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
 color: #b71c1c !important;
}

.input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
 border-bottom: 1px solid #b71c1c !important;
 box-shadow: 0 1px 0 0 #b71c1c !important;
}