ラベル入力タイプのラジオ

Question

入力タイプのラジオボタンを試していて動作しません。問題は、入力タグがラベルタグ内にあり、変更できないことです。

input{ 
 
    display:none; 
 
} 
 

 

 
label:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    margin-right: 10px; 
 
    bottom: 1px; 
 
    background-color: #aaa; 
 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
 

 
} 
 
input[type=radio]:checked + label:before { 
 
    content: "\2022"; 
 
    color: #f3f3f3; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    line-height: 18px; 
 
}

<label for="female"><input id="female" type="radio" name="gender" value="female">Female</label>

Answer 1

あなたは+は、同じレベルで次の要素を選択しますので、あなたの入力のための内側の代替を持っている必要があります。

input{ 
 
    display:none; 
 
} 
 

 

 
span:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    margin-right: 10px; 
 
    bottom: 1px; 
 
    background-color: #aaa; 
 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
 

 
} 
 
input[type=radio]:checked + span:before { 
 
    content: "\2022"; 
 
    color: #f3f3f3; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    line-height: 18px; 
 
}

<label for="female"> 
 
    <input id="female" type="radio" name="gender" value="female"> 
 
    <span for="female"></span> 
 
    Female 
 
</label

Answer 2

PLSがinput:radio

<input id="female" type="radio" name="gender" value="female"> 
<label for="female"> Female.</label> 

Answer 3

.control{ 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 
input{ 
 
    margin-right: 10px; 
 
} 
 
input:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    margin-left: -1px; 
 
    background-color: #aaa; 
 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
 
} 
 

 
input[type=radio]:checked:before { 
 
    content: "\2022"; 
 
    color: #f3f3f3; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    line-height: 18px; 
 
}

<input id="female" class="control" type="radio" name="gender" value="female"> 
 
<label for="female" class="control"> 
 
Female</label>