CSS复选框未选图标怎么加？用::before和:not(:checked)实现

想为复选框未选中状态添加美观自定义图标？直接给input加::before伪元素是无效的，因为原生表单控件不支持伪元素；正确做法是用label包裹input并隐藏它（如opacity: 0或绝对定位移出视口），再利用input:not(:checked)结合相邻兄弟选择器（+）控制其后span的::before显示圆圈、SVG或字体图标——这样既保持语义与可访问性，又实现完全自定义的视觉效果，且不影响表单提交的数据逻辑。

复选框未选中时用 ::before 显示自定义图标

直接给 <input type="checkbox"> 添加 ::before 是无效的——表单控件本身不支持伪元素。必须用标签包裹 + 隐藏原生控件 + 用相邻元素模拟视觉效果。

必须用 label 包裹 input 并隐藏原生 checkbox

核心思路是：把 <input> 移到 内部，用 CSS 把它 opacity: 0 或 position: absolute; left: -9999px 隐藏，再对 label::before 做样式控制。

常见错误是只写 input:not(:checked)::before，这根本不会渲染，浏览器会忽略。

正确结构和基础样式如下：

label {
  position: relative;
  padding-left: 24px;
  cursor: pointer;
}

label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  background-color: #fff;
}

label input:not(:checked) + span::before {
  content: "○";
  font-size: 14px;
  line-height: 16px;
  color: #aaa;
}

:not(:checked) 必须作用在 input 上，再通过兄弟选择器影响 label 内容

因为伪元素只能加在可渲染的元素上（如 label 或 span），所以得靠 input:not(:checked) 的状态，驱动其后紧邻的可渲染元素（比如 span）显示图标。

关键点：

• input 和目标元素之间必须是「相邻兄弟」关系（+）或「通用兄弟」关系（~）
• 如果用 label::before，就得把 input 放在 label 开头，再用 input:not(:checked) + label::before ——但这样 HTML 结构反直觉，不推荐
• 更稳妥的是在 label 里放 input + span，然后写 input:not(:checked) + span::before

用字体图标或 SVG 替代纯字符更可控

用 content: "○" 看似简单，但字号、垂直居中、抗锯齿都难调；建议用 background-image 或内联 SVG。

例如用 SVG 作为未选中图标：

input:not(:checked) + span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23aaa' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: contain;
  margin-right: 6px;
  vertical-align: middle;
}

注意 URL 中的特殊字符（如 #、、>）必须 URI 编码，否则解析失败；Chrome 对 data URL 长度敏感，超长可能回退为默认方框。

真正容易被忽略的是：表单提交时，只有 input 的 name 和 value 起作用，所有伪元素和 span 都不影响数据逻辑——这点别搞混了。

到这里，我们也就讲完了《CSS复选框未选图标怎么加？用::before和:not(:checked)实现》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！