input框focus时的美化效果
Posted afterrains
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input框focus时的美化效果相关的知识,希望对你有一定的参考价值。
input
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
padding-left: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
.15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
input:focus
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
rgba(102, 175, 233, .6)
以上是关于input框focus时的美化效果的主要内容,如果未能解决你的问题,请参考以下文章
美化input type=range标签滑动样式(带渐变效果)
iOS中 H5的input输入框focus()无法自动拉起键盘(解决方法)
使用ElementUI的@input,@change,@blur,@focus进行校验文本框的长度,提示还可以输入多少字