使用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元件，什么也没有被选中。

Answer 2

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; }

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

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