Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "HTML5 color modification example analysis" related knowledge, the editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope this "HTML5 color modification example analysis" article can help you solve the problem.

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

CSS

Copy the code

The code is as follows:

Input [placeholder], [placeholder], * [placeholder] {

Color:red! important

}

HTML input statement

Copy the code

The code is as follows:

The value of the run result 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 plug-in in my browser, but it's still useless. (! important can only be recognized by IE7 and firefox)

Answer:

Toscho: there are three ways to implement it: pseudo elements (pseudo-elements), pseudo classes (pseudo-classes), and Notihing.

WebKit and Blink (Safari,Google Chrome, Opera15+) use pseudo elements

Copy the code

The code is as follows:

::-webkit-input-placeholder

Mozilla Firefox 4-18 uses pseudo classes

Copy the code

The code is as follows:

:-moz-placeholder

Mozilla Firefox 19 + uses pseudo elements

Copy the code

The code is as follows:

::-moz-placeholder

IE10 uses pseudo classes

Copy the code

The code is as follows:

:-ms-input-placeholder

Placeholder text is not supported by CSS selectors in versions below IE9 and Opera12. It is important to note that pseudo elements play the real role of elements in Shadow DOM.

CSS selector

Because the CSS selector varies from browser to browser, you need to make separate settings for each browser.

Copy the 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

}

The code for Matt:textareas (text box stretchable) style is as follows:

Copy the code

The code is 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 both red. All styles should be based on different selectors, and do not package them as a whole, because if one of them goes wrong, the others will fail.

Copy the 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, normal input text color overrides placeholder color:

Copy the 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 is found on the Internet:

Copy the 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 that this code calls is to load the Javascript and then modify the placeholder property with CSS.

Copy the 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 the code

The code is as follows:

Input type= "text" value= "placeholder text" onfocus=this.style.color='#000'

This.value=''; "style=" color: # f00; "/ >

This is the end of the "sample Analysis of HTML5 Color Modification". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.