Change an HTML5 input's placeholder color with CSS

Question

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn\'t do anything

Answer 1

Adding an actual very nice and simple possibility: css filters!

It will style everything, including the placeholder.

The following will set both input elements on the same palette, using the hue filter for color changes. It render very well now in browsers (except ie...)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}

To allow users to change it dynamically, using an input type color for changes, or to find nuances, check out this snippet:

From: https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()

body {background: black; color: white}

Choose a color!



 

  
  

  
 

 

 

Css filters docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter