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
IE9 and OPERA12 versions. It is important to note that pseudo-elements play an elemental role in the shadow Dom.
CSS selectors
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; }
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 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 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; " />
Modify HTML5 input placeholder color using CSS