有看到一些网站的表单提交页面中,当文本宽获取焦点时会渐渐呈现出高亮显示的效果。本文通过CSS3实现了文本输入框获取焦点高亮显示的效果。代码如下:
CSS代码:
input[type=text]:focus{
-webkit-transition:all linear .2s;
-moz-transition:all linear .2s;
transition:all linear .2s;
outline:none;
border-color:rgba(38,130,188,.75);
-webkit-box-shadow:0 0 8px rgba(38,130,188,.5);
-moz-box-shadow:0 0 8px rgba(38,130,188,.5);
box-shadow:0 0 8px rgba(38,130,188,.5);
}
.inpt{
width:200px;
height:18px;
padding:5px;
margin:10px;
border:1px solid #ccc;
}
HTML结构:
当然该效果可以沿用到表单元素中的密码输入框input[type=password]、文本域textarea等其他表单元素。