HTML5 placeholder Implement input background text prompt effect

In this article we look at what is the input box background text hint effect, as shown in:

This effect is now very popular online, but most of it is implemented using JavaScript. But HTML5 gives us a new way to implement pure HTML without any JavaScript, just input add the new attributes in the HTML5 specification to your text box's markup placeholder , and then enter the information you need in the attribute values.

The syntax is basically like this:<input placeholder=”提示信息...”>

HTML code

<form><inputtype= "text"placeholder= "Your name ..."name= "LName"><inputtype= "Password"placeholder= "Your password ..."name= "Pass"><inputtype= "Submit"value= "Submit"></form>

Use CSS to beautify the style of placeholder hint information

The CSS3 has the corresponding common method to beautify the placeholder hint information. You can set the message text color, transparency, background colors and so on.

In order to maximize compatibility with all browsers, it is necessary to add a browser engine prefix to the placeholder property in CSS.

-Google Chrome (Webkit):::-webkit-input-placeholder pseudo-element;

-IE10::-ms-input-placeholder pseudo-class;

-Firefox browser (gecko18-)::-moz-placeholder pseudo-class;

-Firefox browser (gecko19+):::-moz-placeholder pseudo-element;

-Opera (Presto): None.

/*WebKit Browsers*/::-webkit-input-placeholder{Color:Red;}/*Mozilla Firefox 4 to*/:-moz-placeholder{Color:Red;Opacity:1;}/*Mozilla Firefox 19+*/::-moz-placeholder{Color:Red;Opacity:1;}/*Internet Explorer + +*/:-ms-input-placeholder{Color:Red;}

Browser support for placeholder

There is no doubt that the various browsers support the new features and attributes that appear in the HTML5/CSS3, and eventually all browsers will fully support HTML5/CSS3. Currently, the browsers that support HTML5 's placeholder properties are Google Chrome, Firefox, Safari, Opera, and ie10+.

Originally from: Webhek