我正在实现一个具有购物车功能的网站，并希望用户能够为他们购买的产品选择颜色。
假设我是这样开始的：
<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 来为每个选项显示彩色框，这些框水平显示并在所选选项周围有边框？
大致如下：
[红框] [绿框] [黑框]
【问题讨论】：
标签： css radio-button
您可以查看 jQuery UI 的 Button http://jqueryui.com/demos/button/#radio
它允许您为复选框/单选按钮等创建漂亮的样式..
我不确定您是否愿意为此使用整个框架，但据我所知，单选按钮不是很“可样式化”。您需要在它旁边创建另一个元素，并以编程方式更改单选按钮的选定值。
希望这会有所帮助，
马尔科
【讨论】：
因为每个浏览器都会以不同的方式呈现按钮，所以我会使用一系列按钮来改变隐藏输入字段的状态。 （我没有测试这个，但这是一般的想法）：
<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>
【讨论】：
我认为您不会使用单选框。您可以有一个存储颜色的隐藏输入字段，以及用于颜色框的 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>
即使我有一些语法错误，也许这会让你走上正确的道路？如果我能提供更多帮助，请告诉我。
【讨论】：