修改checkbox 的样式

最新推荐文章于 2023-06-28 16:26:04 发布

原创最新推荐文章于 2023-06-28 16:26:04 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS自定义input复选框的方法，通过改变-webkit-appearance和-moz-appearance属性，可以使复选框在谷歌和火狐浏览器中拥有统一且可自定义的外观。具体包括设置宽度、高度、边框圆角、背景颜色和边框样式。

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

input[type=checkbox]{
// 这个属性是将input标签变成一个可修改样式的普通标签，目前有谷歌和火狐浏览器支持
-webkit-appearance: none;
-moz-appearance: none;
width: 16px;
height: 16px;
border-radius: 2px;
background-color: transparent;
border: 1px solid #AAAAAA;
}
input[type=checkbox]:focus, input[type=checkbox]:hover{
border: 1px solid #AAAAAA !important;
}