[CSS3]为表单input和textarea文本框添加发光焦点响应效果

一般网页里面的表单都有文本框，大部分默认的文本框样式并不好看，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);
}

效果如下

如果看不到效果请看演示页 – 演示地址

本文出处：https://www.uedsc.com/css3-glowing-inputs.html