如何在无JS情况下，修改未选中required复选框的外层div背景色

嘿，这个需求完全可以通过纯CSS实现！虽然CSS曾经没有父选择器，但现在大多数现代浏览器都支持:has()伪类，正好能解决你的问题——不用JavaScript，也不需要任何UI框架。

你的复选框带有required属性，这意味着它只有在被勾选时才会处于有效（valid）状态，未勾选时则是无效（invalid）状态。我们可以利用:has()来选中包含这个无效复选框的外层<div>，然后修改它的背景色。

实现代码 #

HTML（整理后的结构）

<form>
  <div class="checkbox">
    <input id="com1" type="checkbox" required>
    <label for="com1">Bla Bla (...)</label>
  </div>
  <button type="submit">SEND</button>
</form>

CSS

/* 当必填复选框未勾选（处于invalid状态）时，为外层div添加背景色 */
.checkbox:has(input[type="checkbox"]:invalid) {
  background-color: #ffebee; /* 浅红色，直观提示用户未勾选 */
  padding: 8px; /* 可选：加一点内边距让背景色更明显 */
  border-radius: 4px;
}

/* 复选框勾选后，恢复div的默认背景 */
.checkbox:has(input[type="checkbox"]:checked) {
  background-color: transparent;
}

补充说明 #

• 当用户点击提交按钮时，浏览器会自动触发表单验证，此时未勾选的复选框会被标记为invalid，对应的外层div就会显示背景色。
• 如果用户勾选了复选框，invalid状态消失，背景色也会自动移除。
• 目前:has()伪类已经被Chrome、Firefox、Safari等主流浏览器支持，如果你需要兼容非常老旧的浏览器，纯CSS可能无法实现（因为没有父选择器的替代方案），但现在大多数场景下这个方案完全够用。

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