CSS实现输入字段的灯光效果

效果

选择输入字段之前：

选择输入字段之后：

代码

插入过渡：全部0.30s release-v -out;
-webkit-transition：所有 0.30 秒的release-in-out；
-moz-transition：所有 0.30 秒的release-in-out；
border：# 35a5e5 1pxsolid ;
边框半径: 4px;
轮廓: 无;
}
输入:焦点 {
框阴影: 0 0 5px 20,381, 81, rgba );
-webkit -盒子阴影: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

这里我们使用transition属性来显示输入字段的变化。
同时需要使用outline属性来覆盖Safari和Chrome中默认的高亮。
这里使用box-shadow属性时，为了实现发光效果而不是阴影效果，使用了亮蓝色。
您还可以使用 RGBA，以便控制颜色的透明度。
同时可以使用border-radius属性打造圆角效果。