How to modify HTML5 input placeholder color

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

:-moz-placeholder

::-moz-placeholder

:-ms-input-placeholder

Because each browser has a different CSS selector, you need to do a separate setting for each browser.

1 ::-webkit-input-placeholder{/*WebKit Browsers*/ 2 Color:#999;3}4 :-moz-placeholder{/*Mozilla Firefox 4 to*/ 5 Color:#999;6}7 ::-moz-placeholder{/*Mozilla Firefox 19+*/ 8 Color:#999;9}Ten :-ms-input-placeholder{/*Internet Explorer + +*/  One Color:#999; A}

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

12color: #636363345color: #636363 6

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.

  1  *::-webkit-input-placeholder  { Span style= "color: #008080;" > 2  color :  red ; }  4  *:- Moz-placeholder  { 5  color :  red ; }  7  *:- Ms-input-placeholder  { 8  /*   ie10+   9  color :  red ; 10 } 

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

1 ::-webkit-input-placeholder{2 Color:Red;Text-overflow:ellipsis;3}4 :-moz-placeholder{5 Color:#acacac!important;Text-overflow:ellipsis;6}7 ::-moz-placeholder{8 Color:#acacac!important;Text-overflow:ellipsis;9}/* for the future*/ Ten :-ms-input-placeholder{ One Color:#acacac!important;Text-overflow:ellipsis; A}

There is also a good way:

1 Input::-webkit-input-placeholder, Textarea::-webkit-input-placeholder{2 Color:#666;3}4 Input:-moz-placeholder, Textarea:-moz-placeholder{5 Color:#666;6}7 Input::-moz-placeholder, Textarea::-moz-placeholder{8 Color:#666;9}Ten Input:-ms-input-placeholder, Textarea:-ms-input-placeholder{ One Color:#666; A}

How to modify HTML5 input placeholder color