Change input’s placeholder color with CSS

JetThoughts Dev - May 30 '22 - - Dev Community

Most modern browsers support the simple pseudo-element:

::placeholder {
  color: #9400d3;
}
Enter fullscreen mode Exit fullscreen mode

but what if you need to apply color to a placeholder in older browsers?

WebKit, Blink, and Edge

WebKit, Blink (Safari, Google Chrome, Opera 15+), and Microsoft Edge are using a pseudo-element ::-webkit-input-placeholder

::-webkit-input-placeholder {
  color: #9400d3;
}
Enter fullscreen mode Exit fullscreen mode

Mozilla Firefox 4 to 18

Using a pseudo-class: :-moz-placeholder

:-moz-placeholder {
  color: #9400d3;
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

Firefox’s placeholder appears to be defaulting with reduced opacity, so needs to use opacity: 1 here.

Mozilla Firefox 19+

Using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while.

::-moz-placeholder {
  color: #9400d3;
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

Internet Explorer 10-11

Using a pseudo-class: :-ms-input-placeholder

:-ms-input-placeholder {
  color: #9400d3;
}
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player