Change input’s placeholder color with CSS

#css #html #webdev #jetthoughts

Most modern browsers support the simple pseudo-element:

::placeholder {
  color: #9400d3;
}

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

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

::-webkit-input-placeholder {
  color: #9400d3;
}

Mozilla Firefox 4 to 18 #

Using a pseudo-class: :-moz-placeholder

:-moz-placeholder {
  color: #9400d3;
  opacity: 1;
}

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

Internet Explorer 10-11 #

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

:-ms-input-placeholder {
  color: #9400d3;
}
Comments