修改input type=checkbox 的样式
时间: 2024-01-17 17:05:57 浏览: 179
要修改 input type="checkbox" 的样式,可以使用 CSS 的伪类选择器 :checked 和 ::before 或 ::after 来实现。
例如,下面的 CSS 代码可以将 checkbox 改成为圆形的样式,并且选中时显示勾号:
```css
input[type="checkbox"] {
display: none; /* 隐藏原有的 checkbox */
}
input[type="checkbox"] + label {
position: relative;
padding-left: 30px;
cursor: pointer;
font-size: 16px;
line-height: 1.5;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
input[type="checkbox"]:checked + label::before {
content: "\2713";
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
```
上述代码中,我们使用了 ::before 伪元素来创建一个圆形的 checkbox,并且用 :checked 伪类选择器来设置选中和未选中状态下的样式。同时,使用 label 元素来触发 checkbox 的选中状态。
你可以根据自己的需求进行修改样式。
阅读全文