一般网页里面的表单都有文本框,大部分默认的文本框样式并不好看,Chrome浏览器默认会给获取焦点的文本框添加一个蓝色的发光效果,但是其它浏览器就不行,以前我都是定义为一个样式,这样确实很不利于用户体验,这样用户分不清那个文本框获取了焦点,若没有文字的光标闪烁的话,那我们如何在文本框获取焦点的时候添加一个蓝色的发光效果呢?
代码如下
input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #ddd; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); }
效果如下
如果看不到效果请看演示页 - 演示地址
本文出处:http://www.uedsc.com/css3-glowing-inputs.html
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4628.html