html - (隐藏)单选按钮的样式标签

Question

基本上这是一个调查，答案从 1 到 10。当有人点击一个数字时，我希望我的标签背景改变颜色。我使用了单选按钮，因为它们只能选择 1 个答案。

<label class="lfirst">
    <input type="radio" name="answer1" value="1">       
    1
</label>

<label>
    <input type="radio" name="answer1" value="2">       
    2
</label>


<style>
input[type="radio"]{
   display: none;
}
.answers label {
  display: inline-block;
  font-weight: bold;
  margin: 0 3px 0 0;
  padding: 4px 12px;
  cursor: pointer;
  background: orange;
}

.answers label + input[type="radio"]:checked{
  background: red;  
}
</style>

Answer 1

您可以获得单选按钮的宽度和高度，将其包装在具有该宽度和高度的 div 中，并为其应用背景色。这样，当您隐藏单选按钮时，div 仍会以相同的宽度和高度以及您选择的背景颜色存在。