Materialize- Changing the default color of input fields

Question

I'm new to Materialize and Angular. I have the exact same question as the question in this thread Change the default color of materialize.css input fields. I have attached screenshot

However, the solutions do not answer the question. I implemented this code in styles.css:

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

label:active {
    color: #005DAB;
  }

Here's what I'm seeing:

What I'm seeing is the bottom border changes to blue (which is what I wanted). However, the label changes to blue temporarily (I'm assuming while it's active) and then it goes back to teal.

How do I make the selected label remain blue (#005DAB).

Answer 1

Hey the problem here is that the default CSS rules of materialize outweigh the custom rule you have defined.

You can read more about this here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

In short the most specific rule overwrites the other so in order to make your change appear you need to make your rule more specific.

There's multiple ways of going about this like using the id in the selector or adding !important to your rule.

However these methods are not recommended, you can rewrite the original CSS rule or add a custom class to add weight to your selector

<div class="input-field col s12 label-color-alternate">
     <input id="password" type="password" class="validate">
     <label for="password" class="">Password</label>
</div>

For example I added a class "label-color-alternate" to the outer div, if we add this class to our selector it'll give us the necessary specificity.

div.row > div.input-field.label-color-alternate > input+label.active {
    color: #005DAB;
}

You can of course experiment with the best way to write your selector and to which elements you want to add custom classes.

I hope this helps !

Answer 2

set this in your external css:

input[type=text]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 2px solid var(--yourcolor);
    box-shadow: 0 0 0 0 var(--yourcolor);
}