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

user_10759414 0
Viewed 9173

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;
  }
}
bootstrap-4 forms css
2 Answers

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.

user_86188750

I think your styles is overrided somewhere. Please look at working example from my fiddle: https://jsfiddle.net/zmpLru0x/1/

<input class="form-control" placeholder="Example placeholder" type='text'>

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

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

In above example you can easily control placeholder color using method you provided. When you change color to white also placeholder and text will be white.

user_85261410
Related