2

As per an answer to a stackoverflow question. I added a placeholder to html select element.

  <option value="" selected disabled hidden><strong style="color:white">Choose here</strong></option>

Now the problem is, I want to change the color of placeholder text to white as my background is gray. It's not accepting any styling.

enter image description here

DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98
  • 1
    I'm Sorry but the question which is linked as similar for closing my question is not resolving my problem. That is just changing the placeholder of input elements! – DevLoverUmar Apr 14 '20 at 10:31

2 Answers2

4

You can use ::placeholder pseudo in CSS, like this example:

::placeholder { color: #fff; }

If you want a cross-browser solution, you can use prefixes:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

The ::placeholder selector only selects the placeholder text inside your input, besides that, you can style the input itself when it is showing the placeholder using :placeholder-show.

Also, be aware that Firefox might show placeholder text lighter than it is supposed to display. to fix the issue you can use:

::-moz-placeholder {
  opacity: 1;
}
Farid Rn
  • 3,167
  • 5
  • 39
  • 66
0

is it googles material design ?
if its google material design i find that this answer is your solution i dont want to take credit of someone else afford so there is the link click here
if its not material design anyway did you try this?

::placeholder {
  color: white;
}

its called pseudo\elements you can read abut them here
the example that i wrote is taken from here

nedy
  • 61
  • 1
  • 5