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

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

我不确定您是否想为此使用整个框架，但据我所知，单选按钮不是非常“有风格”。您需要在它旁边创建另一个元素，并以编程方式更改单选按钮的选定值。

希望这有帮助，

马科

Answer 2

因为每个浏览器都会以不同的方式呈现按钮，所以我将使用一系列按钮来改变隐藏输入字段的状态。 （我没有测试这一点，但这是总体思路）：

<form id="myForm" action="">
  <input type="hidden" id="color" name="color" value="red" />
  <button type="button" style="background-color:red; width:50px; height:50px;"></button>
  <button type="button" style="background-color:green; width:50px; height:50px;"></button>
  <button type="button" style="background-color:blue; width:50px; height:50px;"></button>
</form>

<script>
/* I like jQuery, sue me ;) */
$(function() {
  $('#myForm button').click(function() {
     $('#color').val($(this).css('background-color'));
     $(this).siblings('button').css('border','none');
     $(this).css('border','2px solid black');
  });
});
</script>

Answer 3

我认为您不会使用无线电盒。您可以有一个隐藏的输入字段来存储颜色，以及 3 个用于颜色框的 div。 onclick 事件将处理设置类，以便所选项目具有边框并设置隐藏值。

使用 jQuery 它看起来像这样：

<style type=text/css>
.cchoice { width:10px; height:10px; }
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
.cpicked { border:2px solid yellow; }
</style>

<input type="hidden" name="colorChoice" id="colorChoice" value="">

<div id="cc_Red" class="cchoice red" onclick="makeChoice('red');">
<div id="cc_Green" class="cchoice green" onclick="makeChoice('green');">
<div id="cc_Blue" class="cchoice blue" onclick="makeChoice('blue');">

<script type=text/javascript>
function makeChoice(col) {
  if (col != 'green') $('#cc_Green').removeClass('cpicked');
  if (col != 'blue') $('#cc_Blue').removeClass('cpicked');
  if (col != 'red') $('#cc_Red').addClass('cpicked');
  $('#colorChoice').val(col);
}
</script>

即使我有一些语法错误，也许这会让你走上正确的道路？...让我知道我是否可以提供更多帮助。