输入框鼠标点击发光效css

这里是给input加了一个box-shadow，然后又运用了过渡属性transition。

但除此之外还有需要注意点几点：

1、有些浏览器的input框默认就要发光效果，比如Safari和Chrome，所以这里要让他们的outline不显示。

2、其次，颜色要采用RBGA值才能达到透明的效果。

由此，我们可以总结出代码：

input {
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border: #35a5e5 1px solid;
border-radius: 4px;
outline: none;
}
input:focus {
border:#35a5e5 1px solid;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

保存后用现代浏览器看看效果吧，IE8以下的版本就不要试了。