如何在不使用圖像的情況下使用css設計刻度標記複選框？

Question

有沒有什麼方法只使用HTML和CSS3而不使用圖像來設置刻度標記複選框，就像在Google的登錄頁面中一樣？

Answer 1

您可以通過使用HTML，CSS和jQuery的組合來實現此目的。查看我在這裏創建的代碼，從<a>標籤創建複選框並使用CSS對其進行設置。

我測試過這段代碼，它在Chrome，FF，& IE 7-10中運行的非常漂亮。沒有測試的Safari或Opera ...

http://jsfiddle.net/wdews/reXL6/

只要確保你的窩複選框<a>在標籤標籤<form>，給它一個ID，一個類「複選框」，幷包括hashtag HREF。本質上：

<form action="#" method="get"> 

    <a class="checkbox" id="myCheckbox" href="#"></a> 

    -or- 

    <a class="checkbox checked" id="myCheckbox" href="#"></a> 

    </form> 

讓我知道這是怎麼回事。

Answer 2

這個職位是舊的，但，這是我的建議：

副標籤將複選框這樣的：

<input type="checkbox" value="1" id="c1" /> 
<label class="check" for="c1"></label> 

隱藏通過CSS的複選框：

.checkboxes input[type=checkbox]{ 
    display:none 
} 

風格標籤如你所願。我創建了一個簡單的jsfiddle，它充分演示瞭如何使用personnalise複選框。

Here is jsfiddle