Modify HTML5 input placeholder color with CSS

Modify HTML5 input placeholder color using CSS

This article is selected from StackOverflow (short: SOF) , one of the collection of questions and Answers series, this series will be for readers to share the best foreign quality of the wonderful questions and answers for readers to learn and understand the latest foreign technology. This article will explain to the reader the personalization of HTML5 Input Placeholder color, which needs to be programmed for different browser cores.

Problem:

David Murdoch:chrome supports Input=[type=text] Placeholder text properties, but the following CSS styles do not work:

CSS
input[placeholder], [placeholder], *[placeholder] {     color : red !important ; }
HTML
< input type = "text" placeholder = "Value" />

Running the result value is still gray, color:red has no effect. Is there any way to modify the color of the placeholder text? I installed the jquery placeholder text plugin in my browser, but it's still useless.

Reply:

Toscho : 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 uses pseudo-class:-moz-placeholder
Mozilla Firefox 19+ using pseudo-elements::-moz-placeholder
IE10 using Pseudo-class:-ms-input-placeholde

Placeholder text is not supported for CSS selectors in the IE9 and OPERA12 versions. It is important to note that pseudo-elements play an elemental role in the shadow Dom.

CSS Selector

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; }
brillout.com :The font colors for 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; }
There is also a good way:
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; } user1729061 :The same effect can be achieved without CSS and placeholder text.
<input type= "text" value= "placeholder text" onfocus= "this.style.color=‘#000‘;  this.value=‘‘;" style= "color: #f00;" />

Original: Change a input ' s HTML5 placeholder color with CSS

Modify HTML5 input placeholder color with CSS