html - 使用 CSS 样式化复选框

Question

我正在尝试为表单上的自定义复选框设置样式；我的 HTML 看起来像这样:

<form id="contact">
  <input type="checkbox" id="option1" />
  <label for="option1">Option</label>
</form>

我的 CSS 看起来像这样:

form input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
}
form label {
  padding-left: 20px;
  position: relative;
}
form label:before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: -10px;
  border: 1px solid #000;
}

我想在勾选复选框时添加背景颜色，所以我添加了这条规则:

input[type="checkbox"]:checked + label:before {
  background-color: #ccc;
}

这就像我想要的那样工作，但我只需要具体说明规则才能在联系表单上工作，所以我将其更改为:

#contact input[type="checkbox"]:checked + #contact label:before {
  background-color: #ccc;
}

这次不行了。勾选复选框时背景不会改变。

我的问题是 CSS 有什么问题？我错过了什么？

Answer 1

你们很亲密。选择器应该是:

#contact input[type="checkbox"]:checked + label:before {
  background-color: #ccc;
}

它不起作用的原因是 #contact 不是 input[type="checkbox"] 元素的相邻兄弟元素。您需要省略第二个 #contact id 选择器。

换句话说，选择器:

input[type="checkbox"]:checked + #contact label {}

将尝试选择以下 label 元素:

<input type="checkbox" id="option1" />
<div id="#contact">
   <label for="option1">Option</label>
</div>

由于 input 复选框元素没有相邻的 #contact 元素，因此未选择任何内容。