Html5 and css3 implement input boxes with prompt text (get rid of js)

Source: Internet
Author: User

Comments: A css exclusive to webkit, which 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:
<Input type = "text" placeholder = "User name or email address" name = "username"/>

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?

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.