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

Navigation
10

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

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

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

Question

Using CSS only, how can we set the color to placeholder without affecting the color set for value in a way that works across browsers?

    
asked by anonymous 06.03.2014 / 16:35

2 answers

19

You need to use non-standard CSS properties to affect only 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 CSS Tricks

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

    
06.03.2014 / 16:38
6
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;
}
    
06.03.2014 / 16:55
How to let the page background degrade with JavaScript? How do I change the value of a "date" attribute in JQuery?