A css exclusive to webkit that can control the text styles in it. With css 3 animation effects and pseudo classes, we can easily create an input box with animations, it is suitable for system logon, search, and other locations. If you are interested, you can refer to this article, which may help you not write any technical articles for a long time. Recently, you have been developing a system using Webkit as a carrier, of course, Html5 and CSS3 need to be used in large quantities, which not only reduces a large amount of JS, but also ensures smoother performance.
After the dialog box is selected, the prompt text changes to a light color and the text disappears after the Input. The current common practice is to add a Label after the Input Label. Use JS control.
After HTML5 appears, we have a better method.
The Code is as follows:
The placeholder label is displayed as a text prompt. This is very convenient. But what should we do to minimize the text size or modify the style of the prompt file after selection for perfection?
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 exclusive to webkit. It can control the text styles in it and use it with css 3 animation effects and pseudo classes, we can easily create an animation input box, which is suitable for system logon, search, and other locations. Of course, to be compatible with IE6, this method does not work. However, Ie9 also supports the placeholder label, that is, it cannot be changed.
What should I do if it is not supported? You can simply use Jquery for help, so it is not covered in this article.
For a Demo, the Demo address must be in the Webkit browser to see the complete effect. Is it convenient?
