This morning, I was looking to change the style of placeholder text on HTML5 input elements using CSS but it wasn’t as straight forward as I initially thought.

It turns out individual CSS rules have to be created for each vendor prefix as user agents are required to ignore any rule with an unknown selector (as WebKit doesn’t recognise Mozilla or IE and vice versa).

Therefore, you are required to specify each rule individually, like so:

::-webkit-input-placeholder { // WebKit's pseudo-element rule
 color: #999;
}
:-moz-placeholder { // Mozilla's pseudo-class rule
 color: #999;
}
:-ms-input-placeholder { // IE10's pseudo-class rule
 color: #999;
}


At this point, it’s probably worth using a CSS compiler such as LESS or SASS in an attempt to adopt the DRY principle.