CSS更改无线电的主动选择

我正在使用以下内容创建一个切换开关，而不是单选按钮 – 它工作得很好

.switch { display: block; float: left; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; font-weight: bold; text-transform: uppercase; background: #eee; border: 1px solid #aaa; padding: 2px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); margin-left: 20px; } .switch input[type=radio] { display: none; } .switch label { display: block; float: left; padding: 3px 6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #aaa; cursor: pointer; } .switch label:hover { text-shadow: 0 0 2px #fff; color: #888; } .switch label.checked { background: #8fc800; color: #eee; text-shadow: 0 -1px 1px rgba(0,0,0,0.5); background: -webkit-linear-gradient(top, #8fc800, #438c00); background: -moz-linear-gradient(top, #8fc800, #438c00); background: -ms-linear-gradient(top, #8fc800, #438c00); cursor: default; } 

和HTML：

 
 <input type="radio" name="weekly_new" id="weekSW-0"  value="Yes" /> ON <input type="radio" name="weekly_new" id="weekSW-1"  value="No" /> OFF  

和jquery：

  $(".switch label:not(.checked)").click(function(){ var label = $(this); var input = $('#' + label.attr('for')); if (!input.prop('checked')){ label.closest('.switch').find("label").removeClass('checked'); label.addClass('checked'); input.prop('checked', true); } }); $(".switch input[checked=checked]").each(function(){ $("label[for=" + $(this).attr('id') + "]").addClass('checked'); });  

正如你所看到的那样，label.checked给出了“看起来”的按钮 – 我想要做的是有一个不同的颜色，当选择No时，相反是yes – 红色代表否，绿色代表是，开创性的吧？

无论如何，不​​能为我的生活弄清楚是否可以做到

我为标签分配了ID并尝试了例如

 .switch label.checked #yes { blah blah } 

但是这样的风格毫无用处！

我用这种方式完成了代码，可以这样做吗？

我已经创建了一个小提琴，如果更容易摆弄… obv不得不把valuse检查=检查，因为我通常从mysql表加载，但它不能

http://jsfiddle.net/aS69U/

Answer 1

这个CSS应该与您的代码一起使用：

 .switch #no.checked { background:red; } 

演示

---

顺便说一下酷定制;-)