Home > Web Front-end > H5 Tutorial > body text

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

WBOY
Release: 2016-05-16 15:49:43
Original
1314 people have browsed it

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?
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template