有什麼我可以做的用css修改複選框的顏色？

我有一個複選框，這樣的：fiddle 有什麼我可以做的用css修改複選框的顏色？

<input type="checkbox" value="False" id="abc"> 

and in my css file: 

#abc { background-color: Red; }

我想修改它，使它這樣，當它的檢查就變得更加明顯，背景變化或我避開外界一個非常薄的邊框。但似乎幾乎沒有CSS屬性適用於此複選框。我甚至無法改變字體的高度或大小？

有人可以給我建議，我可以如何改變它的事情。

來源

2011-06-17 JennyM

這是瀏覽器特定的。例如，您不會在FF或Chrome中看到任何內容，但您會看到Opera。一般來說，如果背景顏色和邊框是支持它的瀏覽器，那麼背景顏色和邊框就是您可以生效的樣式，但是如果還有更多，我的頭頂就沒有詳盡的列表。

來源

2011-06-17 10:16:00 kinakuta

但我可以更改複選框的大小嗎？ – JennyM 2011-06-17 10:18:44

是的，你可以設置它的高度和寬度，但是當它將在Opera中調整大小時，它實際上會在其他瀏覽器中移動/定位它。因爲它得不到很好的支持，所以我不打擾它。 – kinakuta 2011-06-17 10:21:50

除了調整其opacity（例如，從0.8開始並在選中時將其設置爲1，使其變得更加突出）之外，您無法用複選框本身做很多事情。

但是，如果您將複選框包裝在某個其他元素（<label>既是自然選擇也是非常實用）並對其進行樣式設計，則可以實現更多功能。

在an update to your fiddle中查看此示例。

來源

2011-06-17 10:18:02 Jon

這取決於你真正想要做什麼。

如果你想要一種亮點的複選框輸入這樣的，你可能會風格標籤/文本/包裝元素，而不是複選框本身，即：如果你想樣式實際

<label id="abc"><input type="checkbox" value="False" id="abc" />Bla</label>

勾選框，您可能需要使用一種剝皮如下所示例如：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

反正這個問題可能在很大程度上取決於瀏覽器。

來源

2011-06-17 10:20:47

你有效地做到這一點的最好方法是在所有瀏覽器上使用實際上是隱藏複選框並創建一個可點擊的元素來切換javascript中的隱藏字段值。有這樣做的jQuery UI button method。

另外，這裏的一些jQuery的僞如果喲想，讓你開始，如果你想自己做：

<input type="hidden" name="terms" value="off" class="checkbox"/> 
<span class="toggler off">Toggle Text, image, or just blank</span> 

$('.toggler').click(function() { 
    $input = $(this).closest('input.checkbox'); 
    if($(this).hasClass('off')) { 
     $input.val('on'); 
     $(this).removeClass('off'); 
    } else { 
     $input.val('off'); 
     $(this).addClass('off'); 
    } 
});

得到這個工作正常，它會尋找/在所有瀏覽器的工作方式相同。

來源

2011-06-17 10:31:16 Dunhamzzz

有什麼我可以做的用css修改複選框的顏色？

回答

相關問題