HTML5 cooperates with CSS3 to implement an input box with prompt text (get rid of js)_html5 tutorial skills

I haven’t written a technical article for a long time. Recently I have been developing a system using Webkit as a carrier. Of course, I need to use a lot of Html5 and CSS3, which not only reduces a lot of JS but also ensures smoother development.

When the dialog box is selected, the prompt text becomes lighter and disappears after input. The common practice now is to add a Label after the Input label. Use JS control.
After HTML5 comes out, we have a better way.

Copy code

The code is as follows:

We see that there is a placeholder tag, which can be used as a user text prompt. This is very convenient. But in order to be the most perfect, we need to make the text lighter or modify the style of the prompt file after selecting it. What should we do?

Copy code

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, a css unique to webkit that can be controlled The text style inside, combined with the animation effects and pseudo-classes of CSS3, we can easily make an animated input box, which is very suitable for system login, search, etc. Of course, if you want to be compatible with IE6, this method won't work. However, Ie9 also supports placeholder tags, but its color cannot be modified.
So, what should I do if it is not supported? You can simply use Jquery directly to help, so it is beyond the scope of this article.
Give me a Demo, Demo address You must use the Webkit browser to see the full effect. Isn't it very convenient?