Comment: A unique css unique to webkit can control the text style. With the animation effects and pseudo-category of css3, we can easily create an animation input box, which is very suitable for system login, search, etc. If you are interested, you can refer to the following article or help you.
I haven't written a technical article for a long time. I have been using Webkit as a carrier recently. Of course, I need to use Html5 and CSS3 in large quantities, which not only reduces a lot of JS but also ensures smoother.When the dialog box is selected, the prompt text will become lighter and disappear after input. The current practice is to add a Label behind the Input tag. Use JS control.
After HTML5 appears, we have a better approach.
<input type="text" placeholder="user name or email address"/>
We see that there is a placeholder tag that can be used as a user's text prompt. This is very convenient. But in order to achieve the best perfection, we need to lighten the text after selecting it, or modify the style of the prompt file. What should we do?
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 unique css unique to webkit, can control the text style inside. With the animation effects and pseudo-classes of css3, we can easily create an animation input box, which is very suitable for system login, search and other locations. Of course, this method will not work in order to be compatible with IE6. However, Ie9 also supports the placeholder tag, but its color cannot be modified.
So, what should I do if it is not supported? You can simply use Jquery to help, so it is not within the scope of this article.
Give a demo, and the demo address must be in the Webkit browser to see the full effect. Isn't it very convenient?