Change the default color of materialize.css input fields. I have attached screenshot

user_6891592 0
Viewed 13517

Please see attachment

I have tried to add custom css, but not worked. I need to change the color of text after selecting the input fields.

<div class="input-field form-group">
    <input id="first_name" class="active validate form-control" name="first_name" type="text" value="">
    <label for="first_name" class="mat-label">First Name</label>
</div>
materialize
6 Answers

An easier way, though you should edit the SCSS files. But if you want in quick then use the following css. I have used royalblue color here, you can use any hex color.

For bottom border

input:focus {
  border-bottom: 1px solid royalblue !important;
  box-shadow: 0 1px 0 0 royalblue !important;
}

For label color

label.active {
  color: royalblue !important;
}
user_67382110

For the line color, I was able to change the default green to black with the css below.

input:not([type]):focus:not([readonly]), input[type="text"]:not(.browser-default):focus:not([readonly]), input[type="password"]:not(.browser-default):focus:not([readonly]), input[type="email"]:not(.browser-default):focus:not([readonly]), input[type="url"]:not(.browser-default):focus:not([readonly]), input[type="time"]:not(.browser-default):focus:not([readonly]), input[type="date"]:not(.browser-default):focus:not([readonly]), input[type="datetime"]:not(.browser-default):focus:not([readonly]), input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), input[type="tel"]:not(.browser-default):focus:not([readonly]), input[type="number"]:not(.browser-default):focus:not([readonly]), input[type="search"]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid black;
    -webkit-box-shadow: 0 1px 0 0 black;
    box-shadow: 0 1px 0 0 black;
}
user_11436810

This green is actually $secondary-color

So in SASS, here is how it can be changed:

$secondary-color: #FEBD09;

@import "materialize-css/sass/components/variables";
user_3051890

You can change the text color easily by changing the code like 

<div class="input-field form-group">
<input id="first_name" class="active validate form-control" name="first_name" type="text" value="">
<label for="first_name" class="mat-label">
<span class="black-text">First Name</span>
</label>
</div>

That is append -text to the color class. Check : http://materializecss.com/color.html

user_64359290
Related