Стилизация флажка с использованием 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.

Другими словами, селектор:

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