（隱藏的）單選按鈕的樣式標簽

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仍將以您選擇的寬度，高度和背景顏色存在。