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，框水平显示并在所选选项周围有边框？

遵循：

[redbox] [greenbox] [blackbox]

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>

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

用于制作单选按钮的CSS显示为小彩色框

3 个答案: