About the color modification of HTML5 input placeholder

This article mainly introduces the knowledge about HTML5 input placeholder color modification. Friends in need can refer to it. Chrome supports the input=[type=text] placeholder text attribute, but the following CSS styles do not work:

CSS

input[placeholder], [placeholder], *[placeholder] { 
color:red !important; 
}

HTML input statement

<input type="text" placeholder="Value" />

The running result value is still gray, and Color: red has no effect. Is there any way to change the color of placeholder text? I installed the jQuery placeholder text plugin in my browser, but it still doesn't work. (!important is only recognized by IE7 and firefox)

Answer:

toscho: There are three implementation methods: 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-classes

:-moz-placeholder

Mozilla Firefox 19 uses pseudo-elements

::-moz-placeholder

IE10 uses pseudo-classes

:-ms-input-placeholder

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

CSS Selector

Because the CSS selector of each browser is different, separate settings need to be made 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: The code for textareas (text box stretchable) style 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 must be specific to different selectors and should not be packaged for overall processing, because if one of them fails, 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, how to overwrite the placeholder color with the normal input text color:

::-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 another 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 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 for calling this code is to load Javascript first and then use CSS to modify the placeholder attributes.

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

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

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

HTML5 contenteditable attribute analysis

The above is the detailed content of About the color modification of HTML5 input placeholder. For more information, please follow other related articles on the PHP Chinese website!