HTML5 input placeholder color modification example_html5 tutorial skills-H5 Tutorial-php.cn

HTML5 input placeholder color modification example_html5 tutorial skills

WBOY

Release： 2016-05-16 15:47:51

Original

1463 people have browsed it

Chrome supports the input=[type=text] placeholder text attribute, but the following CSS styles do not work:

CSS

Copy code

The code is as follows:

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

HTML input statement

Copy code

The code is as follows:

The running result value is still gray, 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-classes and Notihing.
WebKit and Blink (Safari, Google Chrome, Opera15) use pseudo elements

Copy code

The code is as follows:

::-webkit-input-placeholder

Mozilla Firefox 4-18 uses the pseudo class

Copy the code

The code is as follows:

:-moz-placeholder

Mozilla Firefox 19 uses pseudo-element

Copy code

The code is as follows:

::-moz-placeholder

IE10 uses the pseudo class

Copy the code

The code is as follows:

:-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.

Copy code

The code is as follows:

::-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:

Copy code

The code is as follows:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: # 636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}

brillout.com: input and The font color of Textarea is all red. All styles must be specific to different selectors and should not be packaged as a whole, because if one of them fails, the others will fail.

Copy code

The code is as follows:

*::-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:

Copy code

The code is as follows:

::-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:

Copy the code

The code is as follows:

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 was found online:

Copy code

The code is as follows:

$('[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.

Copy code

The code is as follows:

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

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

Copy code

The code is as follows:

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