Фоновое изображение на радиокнопке css

Question

Я добавляю фоновое изображение на радиокнопку. Но моя проблема заключается в том, что изображение не отмечено или нажмите на переключатель (фоновое изображение).

Вот мой код

.form-group input[type="radio"] { 
 
    display: none; 
 
} 
 
.gender input[type="radio"] + label::after { 
 
    background:url('img/male.png') no-repeat -7px -81px; 
 
    width: 28px; 
 
    height: 56px; } 
 
.gender input[type="radio"]:checked + label::before { 
 
    background:url('img/m-f-icon.png') no-repeat; 
 
    width: 28px; 
 
    height: 56px; 
 
    display: inline-block; 
 
    position: relative; 
 
    content: ' '; 
 
    margin-right: 10px; 
 
    cursor: pointer; 
 
    background-position-x: -45px; 
 
}

<div class="form-group gender"> 
 
    <label class="control-label col-xs-2">I'm a</label> 
 
    <div class="col-xs-1"> 
 
    <input type="radio" class="male" name="genderRadios" value="male"> 
 
    <label class="radio-inline gender"></label>        
 
    </div> 
 
    <div class="col-xs-1"> 
 
    <input type="radio" class="female" name="genderRadios" value="female"> 
 
    <label class="radio-inline gender"></label>        
 
    </div> 
 
</div>

Пожалуйста, посоветуйте мне какое-либо решение.

Answer 1

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

JSFiddle:

https://jsfiddle.net/kdrh56md/