使用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/