如何美化CSS单复选框的标签文字_利用:checked + label组合-css教程-PHP中文网

:checked + label 是核心选择器，因原生 checkbox/radio 无法自定义图形，须借相邻 label 承载样式；它精准捕获选中后立即影响兄弟 label 的时机，零 js、保语义、天然支持键盘焦点与屏幕阅读器。

如何美化css单复选框的标签文字_利用:checked + label组合

为什么 `:checked + label` 是核心选择器

因为原生 <input type="checkbox"> 和 <input type="radio"> 无法直接绘制自定义图形，必须借助紧邻的 <label></label> 元素承载视觉样式。而 :checked + label 能精准捕获“选中后立即影响下一个兄弟 label”的时机，无需 JS、不破坏语义、天然支持键盘 focus 和屏幕阅读器（只要 label 正确绑定 for 或包裹 input）。

`label` 文字颜色/间距/对齐怎么随状态联动

文字本身不属于伪元素，不能用 ::before 控制，但可以通过父级 label 的类名或状态选择器统一调整：

选中时文字加粗：input:checked + label { font-weight: 600; }
禁用时文字变灰：input:disabled + label { color: #999; cursor: not-allowed; }
hover 时文字下划线：input + label:hover { text-decoration: underline; }
若 label 内含多级结构（如 <span class="desc"></span>），可单独控制：input:checked + label .desc { opacity: 0.8; }

常见错位：文字和自定义框没对齐怎么办

根本原因是 label 默认是 inline 元素，基线（baseline）对齐导致视觉偏移。最稳的解法是让 label 成为 flex 容器并居中：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.custom-control {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.custom-control input {
  margin-right: 8px;
  opacity: 0;
  position: absolute;
}
.custom-control label::before {
  content: '';
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 6px;
  flex-shrink: 0;
}

关键点：align-items: center 垂直居中所有子项；flex-shrink: 0 防止伪元素被压缩；margin-right 统一控制图文间距。