如何使用CSS設(shè)置復(fù)選框的樣式？我正在嘗試使用以下方式設(shè)置復(fù)選框的樣式：<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />但風(fēng)格并未適用。該復(fù)選框仍顯示其默認(rèn)樣式。我如何給它指定的樣式？
3 回答
瀟湘沐
TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊
更新：以下答案在CSS3廣泛可用之前引用了事物的狀態(tài)。在現(xiàn)代瀏覽器（包括Internet Explorer 9及更高版本）中，使用首選樣式創(chuàng)建復(fù)選框替換更簡單，而不使用javascript。
以下是一些有用的鏈接：
值得注意的是，根本問題沒有改變。您仍然無法將樣式（邊框等）直接應(yīng)用于復(fù)選框元素，并使這些樣式影響HTML復(fù)選框的顯示。然而，改變的是現(xiàn)在可以隱藏實(shí)際的復(fù)選框并用你自己的樣式元素替換它，只使用CSS。特別是，因?yàn)镃SS現(xiàn)在有一個(gè)廣泛支持的:checked選擇器，您可以使您的替換正確反映框的已檢查狀態(tài)。
老答復(fù)
這是一篇關(guān)于樣式復(fù)選框的有用文章。基本上，作者發(fā)現(xiàn)它在瀏覽器與瀏覽器之間存在巨大差異，并且無論您如何設(shè)置樣式，許多瀏覽器始終顯示默認(rèn)復(fù)選框。所以真的沒有一個(gè)簡單的方法。
不難想象一個(gè)解決方法，你可以使用javascript在復(fù)選框上疊加圖像，并點(diǎn)擊該圖像會(huì)導(dǎo)致檢查真正的復(fù)選框。沒有javascript的用戶會(huì)看到默認(rèn)復(fù)選框。
編輯添加：這是一個(gè)很好的腳本，為你做這個(gè) ; 它隱藏了真正的復(fù)選框元素，用樣式化的span替換它，并重定向click事件。
添加回答
舉報(bào)
0/150
提交
取消