Modify HTML5 input placeholder color using CSS

problems have no real value, lack of critical content, and no room for improvement

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

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.

Original question: Change an input ' s HTML5 placeholder color with CSS

• January 24, 2014 question
• Comments
• Invitation to answer
• Edit
• More

Source: Top issues related to Stack OverflowSort By default sorting time 4 answersthe answer is helpful to the person, has the reference valueThe answer is no help, the answer is wrong, irrelevantly replying

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 using Pseudo-class

:-moz-placeholder

Mozilla Firefox 19+ using pseudo-elements

::-moz-placeholder

IE10 using Pseudo-class

:-ms-input-placeholder

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;}

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;}                

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;}        

The last one is found on the Internet:

$(' [placeholder] '). Focus (function() {varInput = $ (this);if (Input.val () = =Input.attr (' placeholder ')) {Input.val (‘‘);Input.removeclass (' placeholder '); }}). blur (function() {varInput = $ (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 (  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.

type="text" value="placeholder text" onfocus="this.style.color=‘#000‘; this.value=‘‘;" style="color: #f00;"/>

• January 24, 2014 answer
• Comments
• Edit

leon_386148216 Prestigethe answer is helpful to the person, has the reference value0 The answer is no help, it's the wrong answer, irrelevantly replying .

It's like you can only write apart.
. style name. Style Name::-webkit-input-placeholder,
. style name. Style Name::-moz-input-placeholder {}
This is no effect.

• January 20, 2015 answer
• 1 reviews
• Edit

The world of the Jin Mao mice31 Prestigethe answer is helpful to the person, has the reference value0 The answer is no help, it's the wrong answer, irrelevantly replying .

CSS code:
Input:-moz-placeholder {color: #369;}
::-webkit-input-placeholder {color: #369;}
HTML code:
Mailbox:
<input id= "Email" type= "email" placeholder= "[email protected]" size= "/>"

• February 09, 2015 answer
• Comments
• Edit

Yang Bai1.7k Prestigethe answer is helpful to the person, has the reference value0 The answer is no help, it's the wrong answer, irrelevantly replying .

In the original read, moved.
Many people will choose this solution:
user1729061: You can get the same effect without CSS and placeholder text.

type="text" value="placeholder text" onfocus="this.style.color=‘#000‘; this.value=‘‘;" style="color: #f00;"/>

The perfection of the author:

type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color=‘#000‘; this.value=‘‘;}" onblur="if(!this.value){this.style.color=‘#f00‘; this.value=‘placeholder text‘; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>

Although the part is perfected, the user submits the placeholder text following table single to the server! I have chosen this:

::-webkit-input-placeholder {/* WebKit browsers * color:  #909 ;} :-moz-placeholder {/* Mozilla Firefox 4 to + */color:  #909; opacity: 1;} ::-moz-placeholder {/* Mozilla Firefox 19+ */color:  #909; opacity: 1;} :-ms-input-placeholder {/* Internet Explorer * * Span class= "Hljs-attribute" >color:  #909;}        

<input placeholder="Stack Snippets are awesome!">

Opacity:1; is to modify the default transparency of the FF leading to color deviation, the other note is the text size settings and input types (email, search). These might affect the rendering in unexpected ways. Use the Properties-webkit-appearance and-moz-appearance-to-change. Example:

[type="search"] {        -moz-appearance:    textfield;        -webkit-appearance: textfield;        appearance: textfield;    }

Modify HTML5 input placeholder color using CSS