radio-button - 为单选按钮添加方形背景

Question

我可能错过了一些简单的东西，但这里有。

我的表单上有几个单选按钮，我希望每个按钮都有一个比按钮本身大几个像素的方形背景。我也希望按钮的内部与背景颜色相同。

我尝试使用 CSS 来更改单选按钮本身的背景颜色：

.Blue{
   background: blue;
}

<input type="radio" class="Blue" value="1"/>

但这没有任何样式。

是否像在每个周围添加标签一样简单，<div>或者是否有另一种方式来设置无线电输入的样式而无需额外的标签？

好奇的解释：颜色代表情绪，悬停时会有一个工具提示。

Answer 1

正如我上面的评论所说，单选按钮输入只是按钮本身，没有背景样式。为了解决这个问题，我在每个周围添加了一个并设置了适合我需要<div>的样式。<div>