css复选框选中样式怎么控制_使用css:checked伪类_技术教程

:checked伪类是控制复选框选中状态样式的核心手段，需隐藏原生checkbox并借助label等兄弟元素实现自定义外观，配合+或~选择器触发视觉变化。

复选框（）默认样式在不同浏览器中差异大，且难以直接美化。CSS 的 :checked 伪类是控制其“选中状态”样式的最核心手段——但它**不能直接作用于元素本身进行复杂样式绘制**（因原生 checkbox 是替换元素，部分样式属性无效），必须配合 HTML 结构调整和 CSS 技巧才能实现自定义外观。

1. 基础原理：隐藏原生 checkbox，用其他元素模拟视觉效果

由于浏览器对的可样式化能力极弱（如 background、border-radius 多数无效），常规做法是：

将原生 checkbox 设置为 opacity: 0 或 position: absolute; left: -9999px 等方式“视觉隐藏”，但保持其可交互和表单功能
利用相邻兄弟选择器（+）或通用兄弟选择器（~），在它后面的标签（）上定义正常样式和选中态样式
通过 input:checked + label 匹配到被选中的 checkbox 对应的 label，并改变其外观（如添加勾选图标、背景色等）

2. 实现一个带圆点图标的自定义复选框

HTML 结构示例：


我已阅读并同意用户协议

CSS 样式示例：

#agree {
  display: none; /* 彻底隐藏原生控件 */
}
agree + label {
position: relative;
padding-left: 30px;
cursor: pointer;
}
agree + label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
}
agree:checked + label::before {
background-color: #4CAF50;
border-color: #4CAF50;
}
agree:checked + label::after {
content: '✓';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 12px;
}

说明：用 ::before 绘制外圈圆，::after 在选中时显示对勾；:checked + label 确保仅当 checkbox 被勾选时才触发样式变化。

3. 使用 :checked 配合 sibling 元素控制其他内容显隐

:checked 还常用于“开关式交互”，比如点击 checkbox 显示/隐藏一段说明文字：

显示详细说明

这里是需要按需展开的补充内容…

#show-info {
  display: none;
}
.detail {
display: none;
margin-top: 8px;
padding: 10px;
background: #f5f5f5;
}
show-info:checked ~ .detail {
display: block;
}

注意这里用了 ~（通用兄弟选择器），因为 .detail 不是 label 的紧邻兄弟，而是同级后续元素。