当input嵌套在label内时，如何用CSS样式化复选框？

可以实现同等程度的样式化，虽然CSS没有原生父选择器，但通过以下两种方式就能达成需求：

方法1：调整内部结构，利用兄弟选择器（兼容性佳） #

把复选框放在label内的文本前方，给文本包裹一个<span>，通过:checked伪类结合相邻兄弟选择器（+）样式化文本，同时自定义复选框外观：

HTML结构 #

<label>
  <input type="checkbox" />
  <span>Label文本</span>
</label>

CSS代码 #

/* 隐藏原生复选框，自定义基础外观 */
input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 8px;
}

/* 复选框选中状态样式 */
input[type="checkbox"]:checked {
  background-color: #2196F3;
  border-color: #2196F3;
  position: relative;
}

/* 添加选中标记 */
input[type="checkbox"]:checked::after {
  content: '✓';
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}

/* 选中时样式化文本 */
input[type="checkbox"]:checked + span {
  color: #2196F3;
  font-weight: bold;
}

方法2：使用:has()伪类（更灵活，需考虑浏览器兼容性） #

如果需要直接样式化label父元素，可使用CSS的:has()伪类——它能检测父元素内是否包含满足条件的子元素，现代主流浏览器（Chrome、Firefox 121+、Edge等）已支持该特性：

HTML结构（无需调整元素顺序） #

<label>
  Label文本
  <input type="checkbox" />
</label>

CSS代码 #

/* 自定义复选框基础样式 */
input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 8px;
}

input[type="checkbox"]:checked {
  background-color: #2196F3;
  border-color: #2196F3;
}

input[type="checkbox"]:checked::after {
  content: '✓';
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}

/* 当label内的复选框选中时，样式化label本身 */
label:has(input[type="checkbox"]:checked) {
  padding: 4px 8px;
  border: 1px solid #2196F3;
  border-radius: 4px;
  color: #2196F3;
}

两种方法都能实现和独立input/label结构同等的样式控制，可根据你的兼容性需求选择使用。

内容的提问来源于stack exchange，提问作者alexkodr