Question

网页输入框怎么实现点击的时候出现蓝色光晕,如图

Answer 1

input:focus { filter:
progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
progid:DXImageTransform.Microsoft.Blur(pixelradius=5)
progid:DXImageTransform.Microsoft.Wheel(duration=4);
-webkit-filter: drop-shadow(0 1px 5px rgba(66,244,253,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(66,244,253,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(66,244,253,.5));
-o-filter: drop-shadow(0 1px 5px rgba(66,244,253,.5));
filter: drop-shadow(0 1px 5px rgba(66,244,253,.5));}
这个亲测，差不多的效果，变变颜色就好了

Answer 2

这个效果一般都是CSS框架实现的
http://v3.bootcss.com/css/#forms
你可以看看这个

.input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}