造型複選框沒有圖像，仍然有標籤？

我試圖對我的複選框進行樣式設置，而不使用圖像。我沒有使用javascript和事件，但我認爲這是最後的手段。是的，我知道很多人都在詢問複選框的樣式，但我沒有找到任何問過這個問題的人，或者是似乎可以解決問題的答案。造型複選框沒有圖像，仍然有標籤？

我看了一下

http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

這是一個很好的教程，僅僅通過CSS實現自定義的複選框。然而，在這個例子中，設計師面臨着一個權衡：

這個解決方案基本上只能在chrome中工作，或者不可能添加標籤作爲可點擊區域的擴展。原因是爲了獲得跨瀏覽器兼容性，每個複選框都被賦予一個空標籤，並且所有樣式都應用於複選框+標籤。結果是，如果我將文本添加到標籤中，它將捲入複選框。

有誰知道一種方法來獲得跨瀏覽器功能，以及功能標籤？我可以提出的最佳解決方案是手動添加onclick事件到標籤上嗎？我真的很喜歡有功能標籤，因爲我認爲它更接近觸摸。

來源

2013-03-01 Kaare

爲什麼不添加第二個標籤？ – 2013-03-01 12:48:47

'因爲不知何故，我認爲這也會在盒子裏面結束:)但它似乎沒有。我可以建議你作出我能接受的答案嗎？ – Kaare 2013-03-01 12:56:57

只需在頁面上的其他任何位置添加一個額外的<label>即可。

例如：

<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox"> 
<label for="checkbox-2-4"></label> 
<label for="checkbox-2-4">Your Label Text Here</label>

你可以再點擊任一和會看到預期的效果。

來源

2013-03-01 13:00:38

但是，我現在面臨一個新問題：我如何在複選框和實際標籤之間獲得足夠的距離？簡單地添加margin-right：5px;對常規復選框沒有影響。我意識到有一個關於在stackoverflow的問題，但我不明白:) – Kaare 2013-03-01 13:03:52

添加樣式到新標籤。使用一個單獨的類名稱。 – 2013-03-01 13:07:18

使用extra labels！

<label for="checkbox-1-1">Label!</label> 
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /> 
<label for="checkbox-1-1"></label>

我演示之前提出他們，但你可以把它們之後（或其他地方），並相應樣式。您提到的文章中的CSS非常好，因爲它只是在之後緊跟這個標籤，因此只要您的「真正」標籤不是那個，就可以了。

來源

2013-03-01 12:57:26 Barney

造型複選框沒有圖像，仍然有標籤？

回答

相關問題