纯CSS设置Checkbox复选框控件的样式(五种方法)

1.使用伪类

通过给input[type=checkbox]设置伪类来实现复选框的样式修改。

/* 选中 */
input[type=checkbox]:checked + label::before {
    content: '\2713'; /* 加入对勾 */
    color: #fff;
    background-color: #007acc;
}

/* 未选中 */
input[type=checkbox] + label::before {
    content: '';
    border: 1px solid #aaa;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 10px; /* 留出右侧空隙 */
    text-align: center;
    line-height: 20px; /* 居中对齐 */
    cursor: pointer;
    box-sizing: border-box;
}

2.使用CSS自定义属性

使用CSS自定义属性来控制复选框的样式。

:root {
    --checkbox-color: #007acc;
    --checkbox-size: 16px;
}

/* 选中 */
input[type=checkbox]:checked + label::before {
    content: '\2713'; /* 加入对勾 */
    color: #fff;
    background-color: var(--checkbox-color);
}

/* 未选中 */
input[type=checkbox] + label::before {
    content: '';
    border: 1px solid #aaa;
    display: inline-block;
    vertical-align: middle;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin-right: 10px; /* 留出右侧空隙 */
    text-align: center;
    line-height: var(--checkbox-size); /* 居中对齐 */
    cursor: pointer;
    box-sizing: border-box;
}

3.使用图像

利用图像来替代原有的复选框图标。

/* 选中 */
input[type=checkbox]:checked + label::before {
    background-image: url('checked.png');
}

/* 未选中 */
input[type=checkbox] + label::before {
    background-image: url('unchecked.png');
}

4.使用伪元素

使用伪元素来模拟复选框。

/* 外框 */
input[type=checkbox] + label::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 10px; /* 留出右侧空隙 */
    border: 1px solid #aaa;
    box-sizing: border-box;
}

/* 内框 */
input[type=checkbox]:checked + label::before::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: 2px;
    background: #007acc;
}

5.使用SVG

使用SVG来实现复选框的样式修改。

/* SVG图标 */
svg {
    width: 16px;
    height: 16px;
}

/* 选中 */
input[type=checkbox]:checked + label::before svg path {
    fill: #007acc;
}

/* 未选中 */
input[type=checkbox] + label::before svg path {
    fill: #fff;
    stroke: #aaa;
    stroke-width: 1px;
}

以上就是“纯CSS设置Checkbox复选框控件的样式(五种方法)”的完整攻略。下面附上两条示例说明：

示例1：使用伪类

<input type="checkbox" id="check">
<label for="check">选项</label>

/* 选中 */
input[type=checkbox]:checked + label::before {
    content: '\2713'; /* 加入对勾 */
    color: #fff;
    background-color: #007acc;
}

/* 未选中 */
input[type=checkbox] + label::before {
    content: '';
    border: 1px solid #aaa;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 10px; /* 留出右侧空隙 */
    text-align: center;
    line-height: 20px; /* 居中对齐 */
    cursor: pointer;
    box-sizing: border-box;
}

示例2：使用图像

<input type="checkbox" id="check" class="css-checkbox">
<label for="check" class="css-label">选项</label>

/* 选中 */
.css-checkbox:checked + .css-label {
    background-image: url('checked.png');
}

/* 未选中 */
.css-label {
    background-image: url('unchecked.png');
    background-position: 0 0;
    padding-left: 20px;
    background-repeat: no-repeat;
}

.css-checkbox {
    display: none;
}

希望以上内容能够对你有所帮助。