使用CSS的自定義收音機和複選框

Question

是否有一種方法可以使用自定義圖像來設置單選按鈕和複選框的樣式。只使用CSS？

有人能指出我該怎麼做嗎？

其他哪些是jquery最好的插件呢？

Answer 1

檢查CSS - Styling Checkboxes, Radio buttons & dropdowns

Answer 2

jQuery UI的有一些優秀的和容易實現的選項：

http://jqueryui.com/demos/button/#checkbox

Answer 3

不知道，你就可以用純CSS來做到這一點，但這種方式是偉大的方式使用javascript：

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

Answer 4

你可以用純CSS3做到這一點，使用僞類:checked。通過這個article啓發我得到了以下解決方案：

特點：

• 只有CSS
• 沒有id屬性需要
• 沒有z-index的需要

試試它的jsfiddle： http://jsfiddle.net/tlindig/n6by8/6/

HTML：

<label> 
    <input type="radio" name="rg"/><i></i> 
    option 1 
</label> 
<label> 
    <input type="radio" checked name="rg"/><i></i> 
    option 2 
</label> 
<label> 
    <input type="radio" name="rg"/><i></i> 
    option 3 
</label> 

CSS：

input[type="radio"] { 
    display:none; 
} 
input[type="radio"] + i:before { 
    content:'\2718'; 
    color:red; 
} 
input[type="radio"]:checked + i:before { 
    content:'\2713'; 
    color:green; 
} 

幾點說明：

元i需要添加僞元素:before與圖標的內容。 input元素爲空標籤，不能具有像:before和:after這樣的僞元素，所以我們需要額外的元素。您也可以使用span或div，但是i更短。

label需要觸發input。如果用label元素包裝input，則不需要id和for屬性進行關聯。

'\ 2718'和'\ 2713'是「選票X」和「複選標記」的UTF8字符代碼。

而不是content你也可以設置一個background-image或你喜歡什麼。

它適用於所有現代瀏覽器和ie9 +。

Answer 5

結帳WTF, forms創建者Bootstrap Mark otto。它有很好的複選框和收音機風格。