效果
输入框选中前：
输入框选中后：
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11362.html
代码
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 {
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);
}
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 {
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);
}
这里通过运用transition属性来展现input框的变化。
同时，这里需要用outline属性来使safari和chrome的默认高亮无效。
这里在使用box-shadow属性时，为了使其不像是阴影效果而达到发光的效果，因而采用了明亮的蓝色。
同时也可以用RGBA，这样就可以控制颜色的透明度了。
同时可以用border-radius属性来做圆角效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11362.html