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元素，因此未选择任何内容。

Answer 2

＆＃13;

form input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0; opacity: 0; }

form label {
    padding-left: 30px;
    position: relative; }

form  label:before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #000; }
    
    #contact input[type="checkbox"]:checked + label:before { background-color: #ccc; }

＆＃13;

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

＆＃13;

请更新此代码#contact input[type="checkbox"]:checked + label:before { background-color: #ccc; }

使用CSS

2 个答案: