input 样式

最新推荐文章于 2024-06-07 17:34:42 发布

原创最新推荐文章于 2024-06-07 17:34:42 发布 · 787 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

编码专栏收录该内容

44 篇文章

订阅专栏

本文介绍了如何使用CSS对input元素进行样式定制，包括去除IE上的×和眼睛图标，设置html5的autofocus属性，关闭浏览器的自动填充功能，以及实现跨浏览器的边距兼容性。此外，还展示了如何美化checkbox，包括改变其默认样式并添加自定义勾选符号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.input在ie下去掉×和眼睛在ie10+input出现×，password出现小眼睛

::-ms-clear, ::-ms-reveal{display: none;}

2.html5聚焦autofocus

3.可以在input中加入autocomplete="off" 来关闭记录

4.兼容各浏览器边距写法

.input-class {
width: 135px;
padding: 10px 15px;
border: none;
background: #fff;
outline: none;
height: 22px;
font-size: 16px;
color: #696969;
}

5.checkbox样式更改

<input id="exception" class="chk" name="exception" type="checkbox"} value="1"/>
<label for="exception"></label>只查询异常信息

/*checkbox*/
.chk {
display: none;
}

.chk + label {
background-color: #FFF;
border: 1px solid #aaa;
width:15px;
height:15px;
box-shadow: none;
border-radius: 2px;
display: inline-block;
position: relative;
margin: auto 10px;
vertical-align: sub;
cursor:pointer;
}
.chk + label:active {
box-shadow: 0;
}

.chk:checked + label {
border: 1px solid #aaa;
box-shadow: none;
color: #aaa;
}

.chk:checked + label:after {
content: '√'; /*勾选符号2714*/
position: absolute;
top: 0px;
left: 0px;
color: #aaa;
width: 100%;
text-align: center;
font-size: 12px;
padding: 0 0 1px 0;
vertical-align: middle;
}