CSS使单选按钮显示为小彩色框

Question

我正在实现一个具有购物车功能的网站，并希望用户能够为他们购买的产品选择颜色。

假设我从这样的事情开始:

<form action="">
  <input type="radio" name="color" value="red" />
  <input type="radio" name="color" value="green" />
  <input type="radio" name="color" value="black" />
</form>

需要什么 CSS 来显示每个选项的彩色框，这些框水平显示并在所选选项周围有边框？

沿着:

[红盒] [绿盒] [黑盒]

Answer 1

您可以查看 jQuery UI 的按钮 http://jqueryui.com/demos/button/#radio

它允许您为复选框/单选按钮等创建漂亮的样式。

虽然我不确定您是否想为此使用整个框架，但据我所知，单选按钮不是很“可设计”。您需要在其旁边创建另一个元素，并以编程方式更改单选按钮的选定值。

希望对您有所帮助，

马可