h5 and css3 create input box with prompt text

A CSS unique to webkit, which can control the text style inside. 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., and feels If you are interested, you can refer to this article, which may help you. 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 came out, we had a better way.

The code is as follows:

<input type="text" placeholder="用户名或邮件地址" name="username"/>

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?

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, which can control the text style inside, and with the animation effects and pseudo-classes of css3, we will It is easy to 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 to help, so it is beyond the scope of this article.
Give a Demo and the Demo address. You must use the Webkit browser to see the complete effect. Isn't it very convenient?

【Related Recommendations】

1. CSS3 Free Video Tutorial

2. Share a few commonly used latest css3 Properties

3. Use CSS to create small sharp corners and bubble effects of the chat box

4. The browser implements high-performance css3 animation on the mobile side

5. h5+css3 code example to achieve image flying in and fade out effect

The above is the detailed content of h5 and css3 create input box with prompt text. For more information, please follow other related articles on the PHP Chinese website!