Change text color from an input element while typing (css)

Question

I have a search box and I want the color of the text in white. I changed the placeholder color to white and the text color to white, but the text color only turns white when the person clicks out of the form (while typing it remains the grey Bootstrap color).

How can I change it? My style.scss code:

.form-control {
  background-color: transparent !important;
  color: white;

  &::placeholder {
    color: white;
    opacity: 1;
  }
}

Answer 1

For your problem focus pseudo class should work:

#searchFieldText:focus {  // set your searchbox with focus pseudo class
    color: #fff; // put your color here
}

Let me know if this works.