CSS如何创建自定义样式的表单复选框_利用伪元素替换原生input-css教程-PHP中文网

原生 checkbox 不能直接用 CSS 改样式，因其渲染由浏览器硬编码；需保留原生 input 并用伪元素覆盖视觉层，同时确保可访问性、焦点管理与状态同步。

css如何创建自定义样式的表单复选框_利用伪元素替换原生input

为什么原生不能直接用 CSS 改样式

因为浏览器对 input[type="checkbox"] 的渲染是硬编码的，appearance: none 虽能隐藏它，但不加额外处理就只剩一个不可见元素——用户点不到、焦点不可达、屏幕阅读器也读不出状态。真要自定义，必须保留原生 input，再用伪元素“盖”在它上面。

用 `::before` 和 `::after` 替换 checkbox 的视觉层

核心思路是：把原生 input 移出视口（但不设 display: none），用其相邻的 label 绑定点击，再通过 input:checked + label::before 控制伪元素状态。

必须用 position: absolute 或 clip: rect() 隐藏原生框，不能用 visibility: hidden 或 opacity: 0——否则键盘 Tab 仍会聚焦到不可见区域，且部分屏幕阅读器会跳过
label 必须和 input 显式关联（for="id" 或包裹关系），否则点击无效
伪元素默认是 inline 级别，要设 display: inline-block 才能控制宽高和 content

input[type="checkbox"] {
  position: absolute;
  clip: rect(0 0 0 0);
}
input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #999;
  margin-right: 8px;
  vertical-align: middle;
}
input[type="checkbox"]:checked + label::before {
  background: #007bff;
  border-color: #007bff;
}
input[type="checkbox"]:checked + label::after {
  content: "✓";
  color: white;
  font-size: 12px;
  position: absolute;
  top: 2px;
  left: 4px;
}