Change the "placeholder" color without affecting the "value" color

Question

In HTML5, we can make use of the attribute placeholder ^(English) in order to give the user a hint about the type of data that a given field accepts.

To avoid confusion between data actually written by the user and the text with the instructions, I would like to apply a different color to the text of the placeholder.

<input type="text" placeholder="Primeiro e Último nome apenas" value="John Doe">
<!--               └────────────────────┬────────────────────┘ └──────┬───────┘  
                                   color: #ccc                   color: #444
-->

Question

Using only CSS, how can we define the color for the placeholder without affecting the colour defined for the value in a way that works in the various browsers ?

Answer 1

You need to use non-standard CSS properties to only affect the placeholder:

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

^{Solution found on the site CSS Tricks}

This should work on all modern browsers. IE supports the attribute placeholder and the pseudo-class :-ms-input-placeholder starting with version 10.

Answer 2

input,
textarea {
    padding: 10px;
    display: block;
    width: 70%;
}

::-webkit-input-placeholder {
   color: orange;
   font: 12px verdana, arial, sans-serif;
}

:-moz-placeholder {
   color: orange;
   font: 12px verdana, arial, sans-serif;
}

::-moz-placeholder {
   color: orange;  
   font: 12px verdana, arial, sans-serif;
}

:-ms-input-placeholder {  
   color: orange;  
   font: 12px verdana, arial, sans-serif;
}