Materialze Input bottom border-bottom color not changing on focus

Question

I have the following html:

        <div class="centered">
          <form class="col">
            <input type="text" class="input-field"></input>
            <span class="helper-text">Email</span>
            <div className="button-wrapper">
              <button className="btn" type="submit">Submit</button>
            </div>
          </form>
        </div>

and the following css:

.input-field input[type=text]:focus {
  border-bottom: 1px solid #4ec632;
  box-shadow: 0 1px 0 0 #4ec632;
}

The bottom outline of the input when focused is still the default blue-ish color instead of the green #4ec632. I've tried multiple solutions and referred to the materialize documentation, but nothing has seemed to work thus far. Any ideas on what I should try?

Answer 1

I have modified your CSS selector to make it change the style when the input field is focused. I have also changed the border and shadow width to 10px to make it shown obvious.

For your info, you might want to change the outline instead of the border. Outline only can apply to the whole element and not able to just change the outline bottom.

/*.input-field input[type=text]:focus {*/
input[type=text].input-field:focus {
  border-bottom: 10px solid #4ec632;
  box-shadow: 0 10px 0 0 #4ec632;
}

<div class="centered">
          <form class="col">
            <input type="text" class="input-field"></input>
            <span class="helper-text">Email</span>
            <div className="button-wrapper">
              <button className="btn" type="submit">Submit</button>
            </div>
          </form>
        </div>