修改 input type="checkbox" 样式
时间: 2023-07-06 15:24:05 浏览: 127
你可以使用 CSS 来修改 `input` 标签的 `type` 属性为 `checkbox` 的样式。以下是一些常见的修改方法:
1. 隐藏默认的复选框,使用自定义的图标或样式来代替。例如:
```css
/* 隐藏默认的复选框 */
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* 使用自定义的图标 */
input[type="checkbox"]::before {
content: "\2714"; /* Unicode 编码,表示一个勾号 */
display: block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
color: white;
background-color: blue;
border-radius: 3px;
}
/* 设置选中时的样式 */
input[type="checkbox"]:checked::before {
content: "\2713"; /* Unicode 编码,表示一个对号 */
background-color: green;
}
```
这段代码会将默认的复选框隐藏掉,使用自定义的圆形图标来代替,选中时会将图标中的勾号改为对号,同时改变背景色。
2. 使用 CSS 的伪类选择器 `:checked` 来为选中的复选框添加样式。例如:
```css
/* 未选中的复选框样式 */
input[type="checkbox"] {
margin-right: 10px;
}
/* 选中的复选框样式 */
input[type="checkbox"]:checked {
background-color: blue;
color: white;
}
```
这段代码会将未选中的复选框右侧留出一定的间隔,选中的复选框的背景色设为蓝色,文字颜色设为白色。
这里只是一些常见的修改方法,你可以根据自己的需要来调整样式。