HTML5 input placeholder color modification example

Comments: This article describes how to modify the color of HTML5 input placeholder. If you need it, refer to Chrome's support of input = [type = text] placeholder text attributes, however, the following CSS styles do not work:

CSS

The Code is as follows:
Input [placeholder], [placeholder], * [placeholder] {
Color: red! Important;
}

HTML input statement

The Code is as follows:
<Input type = "text" placeholder = "Value"/>

The running result value is still gray, and Color: red does not work. Is there any way to modify the color of placeholder text? I installed the jQuery placeholder text plug-in my browser, but it is still useless. (! Important is only recognized by IE7 and firefox)

Answer:

Toscho: There are three implementation methods: pseudo-elements, pseudo-classes, and Notihing.
WebKit and Blink (Safari, Google Chrome, Opera15 +) use pseudo elements

The Code is as follows:
:-Webkit-input-placeholder

Mozilla Firefox 4-18 uses pseudo classes

The Code is as follows:
:-Moz-placeholder

Mozilla Firefox 19 + use pseudo elements

The Code is as follows:
:-Moz-placeholder

Use pseudo classes in IE10

The Code is as follows:
:-Ms-input-placeholder

CSS selectors of IE9 and Opera12 or earlier versions do not support placeholder text. It should be noted that pseudo elements play a real role in the Shadow DOM.

CSS Selector

Because the CSS selectors of Each browser are different, you need to set them separately for each browser.

The Code is as follows:
:-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 extensible) style code, as follows:

The Code is as follows:
Input:-webkit-input-placeholder, textarea:-webkit-input-placeholder {
Color: #636363;
}
Input:-moz-placeholder, textarea:-moz-placeholder {
Color: #636363;
}

Brillout.com: The font color of input and Textarea is red. All styles are determined by different selectors. Do not package them for overall processing, because one of them has a problem and the others will become invalid.

The Code is as follows:
*:-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 overwrites the placeholder color:

The Code is as follows:
:-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;
}

There is also a good way:

The Code is as follows:
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:

The Code is as follows:
$ ('[Placeholder]'). focus (function (){
Var input = $ (this );
If (input. val () = input. attr ('placeholder ')){
Input. val ('');
Input. removeClass ('holder ');
}
}). Blur (function (){
Var input = $ (this );
If (input. val () = ''| input. val () = input. attr ('placeholder ')){
Input. addClass ('holder ');
Input. val (input. attr ('holder '));
}
}). Blur ();
$ ('[Placeholder]'). parents ('form'). submit (function (){
$ (This). find ('[placeholder]'). each (function (){
Var input = $ (this );
If (input. val () = input. attr ('placeholder ')){
Input. val ('');
}
})
});

The rule for calling this code is to first load Javascript and then modify the placeholder attributes with CSS.

The Code is as follows:
Form. placeholder {
Color: #222;
Font-size: 25px;
/* Etc */
}

User1729061: CSS and placeholder text are not required, and the same effect can be obtained.

The Code is as follows:
Input type = "text" value = "placeholder text" onfocus = "this. style. color = '#000 ';
This. value = '';" style = "color: # f00;"/>