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

Question

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>

Answer 1

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