html5文本框获取焦点,CSS3实现文本输入框获取焦点高亮显示

有看到一些网站的表单提交页面中，当文本宽获取焦点时会渐渐呈现出高亮显示的效果。本文通过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等其他表单元素。