CODEWITHSUNDEEP
cssformsbootstrap-4
Flávia Nunes
Flávia Nunes

Reputation: 271

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

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

Upvotes: 8

Views: 14954

Answers (2)

Łukasz Blaszyński
Łukasz Blaszyński

Reputation: 1565

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.

Upvotes: -1

clauub
clauub

Reputation: 1160

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.

Upvotes: 7

Related Questions