スタイルラジオ入力とラベルを別々に

Question

私は現在、ラジオボタンについて学んでいて、皆さんに質問があります： ラジオアイコンとラベルの動作がどう違うのですか？ のは、例を作ってみましょう：

<p>You are a...</p> 
    <input type="radio" id="male" name="gender"/> 
    <label for="male">Male</label><br/> 
    <input type="radio" id="female" name="gender"/> 
    <label for="female">Female</label><br/> 

は別途ボタンのアイコンとそれぞれのラベル（オス/メス）をスタイルする方法はありますか？

ありがとうございます！

Answer 1

はinputのchecked疑似クラスを使用して、あなたがこの

input { 
 
    display: none 
 
} 
 
label { 
 
    display: inline-block; 
 
    margin: 0 20px; 
 
    height: 50px; 
 
    width: 50px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
#male:checked + label[for=male], 
 
#female:checked + label[for=female] { 
 
    border-style: dashed; 
 
} 
 
#male:checked + label[for=male] { 
 
    background: #f99; 
 
} 
 
#female:checked + label[for=female] { 
 
    background: lightblue; 
 
}

<p>You are a...</p> 
 
<input type="radio" id="male" name="gender" /> 
 
<label for="male">Male</label> 
 
<br/> 
 
<input type="radio" id="female" name="gender" /> 
 
<label for="female">Female</label> 
 
<br/>