样式无线电输入和标签分开

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

有没有办法设置按钮的样式＆＃39;图标和各自的标签（男/女）分开？

非常感谢！

Answer 1

使用input的{​​{1}}伪类，你可以做这样的事情

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;
}