欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Html5共同Css3实现带提醒笔墨的输入框(挣脱js)

发布时间:2016-11-29  编辑:杨雨个人博客网站   点击:   

好久没写过技能文章了,最近一向在以Webkit作为载体开拓体系,虽然必要大量行使Html5与CSS3,不只镌汰大量的JS还可以担保更流通。
Html5配合Css3实现带提示文字的输入框(解脱js) 
当选中对话框后,提醒笔墨变淡色,输入后消散.这个此刻通行的做法是在Input标签后头增进一个Label。行使JS节制。
HTML5呈现后,我们有一个更好的要领。 


代码如下:
<input type="text" placeholder="用户名或邮件地点" name="username"/>

我们看到有placeholder标签,可以作为用户笔墨提醒。这样子就很是利便了。可是为了最求美满,我们必要在选中后,将笔墨变浅,可能修改提醒文件的样式,我们该怎么办?


代码如下:
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,webkit特有的一个Css,可以节制内里的笔墨样式,共同Css3的动画结果和伪类,我们就可以很轻易做出一个发动画的输入框,在体系登录、搜刮等位置很得当。虽然你要为了兼容IE6,这个要领是行不通。不外Ie9也支持placeholder标签,就是无法修改它的颜色罢了。
那么,假如不支持该怎么办?可以简朴直接行使Jquery资助,那么在就不在本文接头范畴了。
给一个Demo,Demo地点 必需在Webkit赏识器下才看到完备结果。是不是很利便?
本文地址:http://itbyc.com/web/html5/13833.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1