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