Изменить цвет фона родительского div, когда установлен дочерний вход

Question

Вот код. Мне нужно изменить цвет фона .register-switch, когда установлен флажок «Женский». Я пробовал:

input[value="Female"]:checked + .register-switch { 
    background: red; 
} 

, но он не работает. Возможно ли добиться желаемого эффекта без использования JavaScript?

.register-switch { 
 
    height: 32px; 
 
    margin-bottom: 20px; 
 
    padding: 4px; 
 
    background: lightblue; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.register-switch-input { 
 
    display: none; 
 
} 
 
.register-switch-label { 
 
    float: left; 
 
    width: 50%; 
 
    line-height: 32px; 
 
    color: #fff; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.register-switch-input:checked + .register-switch-label { 
 
    font-weight: normal; 
 
    color: #666; 
 
    background: #fff; 
 
    border-radius: 2px; 
 
    background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: -moz-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: -o-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: linear-gradient(to bottom, #fefefe, #eeeeee); 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1); 
 
}

<div class="register-switch"> 
 
    <input type="radio" name="sex" value="Male" id="sex-m" class="register-switch-input" checked> 
 
    <label for="sex-m" class="register-switch-label">Male</label> 
 
    <input type="radio" name="sex" value="Female" id="sex-f" class="register-switch-input"> 
 
    <label for="sex-f" class="register-switch-label">Female</label> 
 
</div>

Answer 1

Вы можете попробовать что-то вроде этого.

Вместо применение цвета фона родительского элемента, создать :afterpseudo-element со 100% высоты и ширины и применить фон к after позже это можно получить доступ с помощью + selector.make обязательно установите position:relative на родителе элемент (.register-switch)

.register-switch { 
 
    height: 32px; 
 
    margin-bottom: 20px; 
 
    padding: 4px; 
 
    position:relative; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.register-switch-input { 
 
    display: none; 
 
} 
 
.register-switch-label { 
 
    float: left; 
 
    width: 50%; 
 
    line-height: 32px; 
 
    color: #fff; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.register-switch-label:after{ 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    background:lightblue; 
 
    left:0; 
 
    top:0; 
 
    z-index:-1; 
 
    } 
 
.register-switch-input:checked + .register-switch-label:after{ 
 
    background:tomato; 
 
    } 
 
.register-switch-input:checked + .register-switch-label { 
 
    font-weight: normal; 
 
    color: #666; 
 
    background: #fff; 
 
    border-radius: 2px; 
 
    background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: -moz-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: -o-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: linear-gradient(to bottom, #fefefe, #eeeeee); 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1); 
 
}

<div class="register-switch"> 
 
    <input type="radio" name="sex" value="Male" id="sex-m" class="register-switch-input" checked> 
 
    <label for="sex-m" class="register-switch-label">Male</label> 
 
    <input type="radio" name="sex" value="Female" id="sex-f" class="register-switch-input"> 
 
    <label for="sex-f" class="register-switch-label">Female</label> 
 
</div>

Answer 2

Вы можете использовать JQuery, чтобы выбрать родительский элемент ввода радио и добавить/удалить CLA ss, когда этот вход изменяется.

<div class="register-switch"> 
    <input type="radio" name="sex" value="Male" id="sex-m" class="register-switch-input" checked> 
    <label for="sex-m" class="register-switch-label">Male</label> 
    <input type="radio" name="sex" value="Female" id="sex-f" class="register-switch-input"> 
    <label for="sex-f" class="register-switch-label">Female</label> 
</div> 

.clicked { 
    background-color: red; 
} 

$('.register-switch-input').on('change', function() { 
    $this = $(this); 
    $this.parent().addClass('clicked'); 
}); 

http://jsfiddle.net/yfh301od/