使用jQuery突出显示复选框和单选按钮。

Question

我在突出显示已选中的复选框和单选按钮时遇到了一些问题。做.css("border", "1px solid red")或.css("background-color", "yellow")似乎没有工作。

除了默认选中标记或填充单选按钮之外，我需要通过某种方式突出显示这些复选框或单选按钮的方式来确定。

HTML例子

<input type="radio" title="search" value="T" name="srchType"> 
<input type="checkbox" value="1" name="option1"> 

Answer 1

如果您希望保留复选框的浏览器的默认外观，也没有太多你可以使用CSS样式。非标准复选框外观不是用边框或背景颜色实现的，而是用代表各种状态的新图形批量替换（例如，参见here和here）。

但是，根据您的HTML结构的不同，您可能能够使用普通的css实现令人满意的效果。例如，如果有这样的事情：

<label> 
<input id="cb1" name="cb1" type="checkbox" value="1" /> 
My Checkbox 
</label> 

您可以将样式是这样的：

$('input:checkbox').click(function(){ 
    $(this).parent('label').toggleClass('highlight', this.checked); 
}); 

...用CSS这样的：

label { display: block; } 
.highlight { background-color: yellow; } 

下面是一个例子： http://jsfiddle.net/redler/c3hDK/1/

Answer 2

请点击此链接，它拥有所有的信息

change checkbox border color

Answer 3

Filament Group也有一篇您可能会觉得有用的文章。 http://filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/