时间:2021-07-01 10:21:17 帮助过:13人阅读
把input的边框隐藏,给input用背景图样式,得到焦点与失去焦点分别用两个有背景图样式的CLASS进行切换。(提示背景图可以画成圆角的,与发光的边,或任意你想得到的效果)
简单点弄gif图片上面叠一个input
随意套用一个input
以下是css:
input {
display: inline-block;
width: 210px;
margin-bottom: 9px;
line-height: 18px;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 3px;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
随意套用一个input
以下是css:
input {
display: inline-block;
width: 210px;
margin-bottom: 9px;
line-height: 18px;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 3px;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
谢谢了,不过这个我测试了一下,对IE9无效,chrome效果不对,遨游完美实现。不过收到启发,自己弄弄看看