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

This article mainly introduces how to set the style of placeholder in HTML5, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand it.

First of all, let's find out what placeholder is.

Placeholder is a new attribute of HTML5 that specifies a short prompt that describes the expected value of the input field, which is displayed in the input box before the user enters it and then disappears after the user enters the field.

Depending on the browser, the prompt (placeholder) may or may not remain visible when the input field (box) becomes focus. For example, IE10+ will be hidden when the input is focused, even if it is still empty.

Scope of application:

The placeholder attribute applies to the following input types: text, search, url, tel, email, and password.

Compatibility:

Because it is a new property in HTML5, there will be compatibility issues. Let's take a look at browser support:

2.jpg

The number in the table represents the first browser version number that supports the property.

The basic usage of the placeholder attribute, with an example:

User name:

Secret code:

In general, the placeholder property will have its own default style, when sometimes for the overall beauty of the page, we want to customize the style, so how to set the style of placeholder?

Let's use a simple code example to show you how to use css3 to style placeholder.

Example of the style code for css3 to set up placeholder:

Input::-webkit-input-placeholder {

Color:palevioletred

}

Input::-moz-placeholder {

Color:palevioletred

}

Input:-ms-input-placeholder {

Color:palevioletred

}

Input::-webkit-input-placeholder {

Color:palevioletred

}

Input::placeholder {

Color:palevioletred

}

As you can see, we styled the placeholder attribute through the pseudo-element:: placeholder of css3. In css3, the pseudo element:: placeholder is the style used to set the object's literal placeholder.

Description:

:: placeholder pseudo element is used to control the appearance of the placeholder in the form input box. It allows the developer / designer to change the style of the text placeholder. The default text placeholder is light gray. The effect may not be obvious when the background color of the form is a similar color, so you can use this pseudo element to change the color of the text placeholder.

Note:

Some browsers have their own non-standard implementations of:: placeholder pseudo elements. All of these implementations require a browser prefix. Examples of these embodiments are:-webkit-input-placeholder,:-ms-input-placeholder (single colon), and:-moz-placeholder has been deprecated by Firefox19, and now supports updated::-moz-placeholder pseudo elements.

Except that Firefox is:: [prefix] placeholder, other browsers use:: [prefix] input-placeholder.

Thank you for reading this article carefully. I hope the article "how to set the style of placeholder in HTML5" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.