更改包含标签 + 输入的 div 的颜色，当复选框未被选中时 - 没有 JS？ [复制]答案

【问题标题】：Change colour of div, that contains label + input, when checkbox is not :checked - without JS? [duplicate]更改包含标签 + 输入的 div 的颜色，当复选框未被选中时 - 没有 JS？ [复制]
【发布时间】：2018-10-28 20:25:10
【问题描述】：

首先，感谢您的阅读。我不是英语母语，但我会尽量表达清楚。

我在一个表单中有三个复选框，每个复选框的标签都在一个 div 中。最后一个是 :required ，如果不是 :checked 是否可以在不使用 JS 的情况下更改 div 的背景？只有 CSS，无需使用 Pure 或 Bootstrap。

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

  <button type="submit">SEND</button>
</form>

【问题讨论】：

不，这不可能
谢谢，阅读其他问题和答案。这是有道理的。

标签： javascript css forms validation checkbox

【解决方案1】：

这样的？

input[type=checkbox]:checked + label {
  background-color: #fff;
  font-style: italic;
} 
input[type=checkbox] + label {
  background-color: red;
  font-style: normal;
}

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

  <button type="submit">SEND</button>
</form>

希望对你有帮助。

【讨论】：

看起来很有希望。尝试在未选中复选框时使其工作，但被本机浏览器验证卡住。谢谢。