CSS стиль для ввода тегов внутри этикетки

Question

Я использую ниже фильтр для сортировки списка:

<fieldset class="groups"> 
    <h4 class="cufon_headings">Groups</h4> 
    <div class="checkbox"> 
    <input type="checkbox" value="member1"> 
    <label>Member 1</label> 
    </div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" value="member2"> 
     Member 2</label> 
    </div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" value="member3"> 
     Member 3</label> 
    </div> 
</fieldset> 

Это мой CSS для указанного выше фильтра:

/* Checkbox Styles*/ 
fieldset { 
    display: inline-block; 
    vertical-align: top; 
    margin: 0 1em 0 0; 
    background: #fff; 
    padding: .5em; 
    border-radius: 3px; 
} 

.checkbox{ 
    display: block; 
    position: relative; 
    cursor: pointer; 
    margin-bottom: 8px; 
} 

.checkbox input[type="checkbox"]{ 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    cursor: pointer; 
    margin: 0; 
    opacity: 0; 
    z-index: 1; 
} 

.checkbox label{ 
    display: inline-block; 
    vertical-align: top; 
    text-align: left; 
    padding-left: 2em; 
} 

.checkbox label:before, 
.checkbox label:after{ 
    content: ''; 
    display: block; 
    position: absolute; 
} 

.checkbox label:before{ 
    left: 0; 
    top: 0; 
    width: 18px; 
    height: 18px; 
    margin-right: 10px; 
    background: #ddd; 
    border-radius: 3px; 
} 

.checkbox label:after{ 
    content: ''; 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    width: 10px; 
    height: 10px; 
    border-radius: 2px; 
    background: #E50082; 
    opacity: 0; 
    pointer-events: none; 
} 

.checkbox input:checked ~ label:after{ 
    opacity: 1; 
} 

.checkbox input:focus ~ label:before{ 
    background: #eee; 
} 

Первый флажок (член 1) правильно оформлен, т. е. проверка первого параметра указывает флажок «пурпурный». В этом примере тег находится за пределами тегов.

Другие варианты chekcbox (Member 2 и Member 3) не меняют пурпурный цвет при их выборе. Оба тега находятся внутри тега.

Предпочтительный вариант имеет теги внутри тегов. Тем не менее, я не мог понять, как адаптировать CSS для этого. Может ли кто-нибудь помочь? (Вот ссылка на the code on CopePen)

Answer 1

<fieldset class="groups"> 
    <h4 class="cufon_headings">Groups</h4> 
    <div class="checkbox"> 
    <input type="checkbox" value="member1"> 
    <label>Member 1</label> 
    </div> 
    <div class="checkbox"> 

     <input type="checkbox" value="member2"> 
     <label>Member 2</label> 
    </div> 
    <div class="checkbox"> 

     <input type="checkbox" value="member3"> 
     <label>Member 3</label> 
    </div> 
</fieldset> 

Убедитесь, что метки являются правильными для элемента 2 и 3. Вы имели тег метку, включая входную тег. Вышеприведенный код работает.

Answer 2

Ответ Чарли правильный. В CSS вы не можете повлиять на родителя - только на ребенка.

before и after являются элементами puesdo, и они не точно действуют как обычные элементы, поэтому они не являются братьями и сестрами input.

Для того, чтобы решить проблему, изменить каждый:

<div class="checkbox"> 
    <label> 
     <input type="checkbox" value="memberN"> 
     Member N 
    </label> 
</div> 

В:

<div class="checkbox"> 
    <input type="checkbox" value="memberN"> 
    <label> 
     Member N 
    </label> 
</div> 

Answer 3

Спасибо за ваши комментарии. Предполагалось, что первый флажок отличается от других, чтобы показать эффект.

Если это невозможно с помощью CSS, я думаю, мне нужно адаптировать, как плагин Contact Form 7 для Wordpress выдает HTML-код для флажков. Не предпочтительный способ решения проблемы.