David Murdoch: 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 does not work. Is there any way to modify the color of placeholder text? I installed the jQuery placeholder text plug-in my browser, but it is still useless. (! Important is only recognized by IE7 and firefox)
Answer:
Toscho:There are three implementation methods: pseudo-elements, pseudo-classes, and Notihing.
WebKit and Blink (Safari, Google Chrome, Opera15 +) use pseudo elements
|
::-webkit-input-placeholder |
Mozilla Firefox 4-18 uses pseudo classes
Mozilla Firefox 19 + use pseudo elements
Use pseudo classes in IE10
CSS selectors of IE9 and Opera12 or earlier versions do not support placeholder text. It should be noted that pseudo elements play a real role in the Shadow DOM.
CSS Selector
Because the CSS selectors of Each browser are different, you need to set them separately 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 be stretched) style code, 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 are determined by different selectors. Do not package them for overall processing, because one of them has a problem and the others will become invalid.
*::-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 overwrites the placeholder 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 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 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 first load Javascript and then modify the placeholder attributes with CSS.
form .placeholder { color: #222; font-size: 25px; /* etc */}
User1729061: Do not use CSS or placeholder text to achieve the same effect.
input type="text" value="placeholder text" onfocus="this.style.color='#000'; this.value='';" style="color: #f00;"/>
Original article: Change an input's HTML5 placeholder color with CSS