HTML5 Input Placeholder Color modification

This article mainly describes the HTML5 input placeholder color modification aspects of knowledge, the need for friends can refer to the following

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 Statement

<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. (!important only IE7 and Firefox can identify)

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 */color : #999; }::-moz-placeholder {/* Mozilla Firefox 19+ * * color: #999;}:-ms-input-placeholder {/* Internet Explorer * * * 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+ */Colo r: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-o Verflow: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 () {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.add Class (' 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 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.

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

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!