Modify HTML5 input placeholder color using CSS

There are three implementations: pseudo-elements (pseudo-elements), pseudo-classes (pseudo-classes), and notihing.
WebKit and Blink (Safari,google Chrome, opera15+) use pseudo-elements

::-webkit-input-placeholder

Mozilla Firefox 4-18 using Pseudo-class

:-moz-placeholder

Mozilla Firefox 19+ using pseudo-elements

::-moz-placeholder

IE10 using Pseudo-class

:-ms-input-placeholder

IE9 and OPERA12 versions. It is important to note that pseudo-elements play an elemental role in the shadow Dom.
CSS selectors
because each browser has a different CSS selector, you need to do a separate setting for each browser.

::-webkit-input-placeholder { /* webkit browsers */    color:      #999;}:-moz-placeholder { /* mozilla firefox 4 to  18 */    color:     #999;}::-moz-placeholder { /*  mozilla firefox 19+ */    color:     #999;}:- Ms-input-placeholder { /* internet explorer 10+ */    color:      #999;} 

Matt:textareas (text box can stretch) style style code, as follows:

Input::-webkit-input-placeholder, Textarea::-webkit-input-placeholder {color: #636363;} Input:-moz-placeholder, Textarea:-moz-placeholder {color: #636363;}

The font colors of brillout.com:input and textarea are all red. All styles are based on different selectors, and do not package the whole process because one of the problems, the others will fail.

*::-webkit-input-placeholder {color:red;} *:-moz-placeholder {color:red;} *:-ms-input-placeholder {/* ie10+ */color:red;}

james Donnelly: In Firefox and IE, the normal input text color overrides the placeholder color method:

::-webkit-input-placeholder {     color: red; text-overflow:  ellipsis; }:-moz-placeholder {     color:  #acacac  !important;  text-overflow: ellipsis; }::-moz-placeholder {     color: # acacac !important; text-overflow: ellipsis; } /* for the future * /:-ms-input-placeholder {     color:  #acacac  !important;  text-overflow: ellipsis; } 

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {      color:     #666;} input:-moz-placeholder, textarea:-moz-placeholder {     color:      #666;} input::-moz-placeholder, textarea::-moz-placeholder {     color:      #666;} Input:-ms-input-placeholder, textarea:-ms-input-placeholder {     color:      #666;} 

The last one is from the Internet:

$ (' [placeholder] '). focus (function ()  {        var input  = $ (This);        if  (Input.val ()  == input.attr (' Placeholder '))  {            input.val (");             input.removeclass (' placeholder ');         }    }). blur (function ()  {         var input = $ (This);         if  (Input.val ()  ==  '  | |  input.val ()  == input.attr (' placeholder '))  {             input.addclass (' placeholder ');             input.val (input.attr (' placeholder '));         }    }). blur ();     $ (' [placeholder] '). Parents (' form '). Submit (function ()  {        $ (this). Find (' [ PLACEHOLDER] '). each (function ()  {             var input = $ (this);             if   (Input.val ()  == input.attr (' placeholder ')  {                 input.val (');             }        })     });

The rule called by this code is to load JavaScript and then modify the placeholder properties with CSS.

form. Placeholder {color: #222;   font-size:25px; /* etc */}

user1729061: You can get the same effect without CSS and placeholder text.

<input type= "text" value= "placeholder text" onfocus= "this.style.color= ' #000 '; This.value= '; "style=" color: #f00; " />

Modify HTML5 input placeholder color using CSS