H5 and CSS3 to make input boxes with hint text

WebKit unique CSS, you can control the text style inside, with CSS3 animation effect and pseudo-class, we can easily make a drive to draw the input box, in the system login, search and other locations are suitable, interested you can refer to this article may help you have not written a technical article for a long time, Recently has been to WebKit as a carrier development system, of course, the need to use a large number of HTML5 and CSS3, not only reduce a large number of JS can also guarantee smoother.

When the dialog box is selected, the prompt text becomes light and disappears after you enter it. The current practice is to add a label after the input tag. Use JS control.
After the advent of HTML5, we have a better way.

The code is as follows:

<input type= "text" placeholder= "username or mail Address" name= "username"/>

We see a placeholder tag that can be used as a user text hint. This is a very convenient way to go. But in order to be perfect, we need to make the text lighter, or modify the style of the cue file after the selection, what do we do?

The code is as follows:

Input::-webkit-input-placeholder {color: #999;-webkit-transition:color.5s;} input:focus::- Webkit-input-placeholder, Input:hover::-webkit-input-placeholder {color: #c2c2c2;-webkit-transition:color.5s;}

-webkit-input-placeholder,webkit unique CSS, you can control the text style inside, with CSS3 animation effect and pseudo-class, we can easily make a drive to draw the input box, in the system login, search and other locations are suitable. Of course you want to be compatible with IE6, this method is not feasible. However, Ie9 also supports the placeholder tag, which means that it cannot be changed by color.
So, what if I don't support it? You can simply use jquery to help, so it's not covered in this article.
A Demo,demo address must be in the WebKit browser to see the full effect. Isn't it convenient?

"Recommended"

1. CSS3 Free Video Tutorial

2. Share some of the most recent CSS3 properties that are commonly used

3. Use CSS to make chat box small sharp corner, bubble effect

4. Browser for mobile high-performance CSS3 animation

5. H5+CSS3 code instances that implement picture fly-in and fade-out effects