Style Radio Eingang und Label getrennt

Question

Ich lerne gerade über die Radio-Tasten und ich habe eine Frage für euch Jungs: Wie bekomme ich das Radio-Symbol und die Bezeichnung, um sich anders zu verhalten? Nehmen wir ein Beispiel machen:

<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/> 

Gibt es eine Möglichkeit, die Tasten -Symbol und entsprechende Etikett (männlich/weiblich) separat stylen?

Vielen Dank!

Answer 1

Verwenden Sie die input ‚s checked Pseudo-Klasse, und Sie können Sie haben, und was Sie haben versucht, machen

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/>