Style radio input and label separately

问题

I'm currently learning about the radio buttons and I have a question for you guys: How do I get the radio icon and the label to behave differently? Let's make an example:

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

Is there a way to style the buttons' icon and respective label (male/female) separately?

Thanks a lot!

回答1:

Use the input's checked pseudo class, and you can do something like this

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

来源：https://stackoverflow.com/questions/41816293/style-radio-input-and-label-separately