複選框的CSS樣式

是否可以在不使用javascripts的情況下對HTML複選框進行樣式設置？此代碼例如可以在IE瀏覽器中正常工作，但不能在Firefox或Chrome上正常工作。 http://jsfiddle.net/5wJxF/ 有什麼建議嗎？複選框的CSS樣式

來源

2011-06-29 sunjie

你應該在這裏粘貼你的代碼 –

它在Opera中工作 – levu

我不確定「沒有使用javascript」。常用的方法是用javascript的幫助，用自定義的「複選框」替換html複選框。這種方式的例子是各種各樣的jQuery插件，例如http://alt-checkbox.starikovs.com – starikovs

YES。它可能是是。

您不能直接設置複選框元素的樣式，但如果您將<label>元素與複選框以及樣式結合使用，則可以實現您正在查找的效果。

<input type="checkbox" id="field1" class="mycheckbox" /> 
<label for="field1" class="mycheckbox-label">Label here</label>

然後你的CSS是這樣的：

.mycheckbox { 
    display:none; 
} 

.mycheckbox + label { 
    padding:20px; /*or however wide your graphic is*/ 
    background:url(/fancy-unchecked.gif) no-repeat left center; 
} 

.mycheckbox:checked + label { 
    background:url(/fancy-checked.gif) no-repeat left center; 
}

這裏是一個工作示例：http://jsfiddle.net/TVaPX/（火狐5測試）

這種方法的問題在於，它只能在現代瀏覽器中。舊版瀏覽器可能不支持:checked或+ CSS選擇器。但如果你沒有支持舊版本的IE，那麼這將工作。上述示例在IE8中不起作用（它支持+，但不支持:checked）。

如果您對此不滿意，那麼您必須堅持使用Javascript解決方案。

但是，使用類似於此的方法，您仍然可以使用非常少量的Javascript代碼執行此操作：只需單擊一行JS即可在選中時切換複選框的類，並且可以使用所有以上代碼，但使用替代類名而不是:checked選擇器。這將在IE7和IE8中起作用。

希望有所幫助。

來源

2011-06-29 11:44:56 Spudley

+1使用jsFiddle的圖像:)但是，因爲問題提到跨瀏覽器兼容性，可能答案應該是「沒有」。 – Tsar

@Bad：呃，從技術上講，它在IE中工作...... IE9就是這樣。他沒有具體說明他想要支持哪些版本;）但是你當然是對的，IE8是現在最需要支持的現實標準（如果你的老闆是受虐狂的話，可能是IE7甚至IE6）。但我小心地解釋了一些注意事項，並給出了一個極簡主義的JS解決方案，它爲舊版瀏覽器使用了相同的基本方法。 :)使用Modernizr或類似的，你當然可以檢查兼容性，然後再決定是使用純CSS還是JS解決方案。但是當然，Modernizr本身就是一個JS解決方案。嘿嘿。 – Spudley

這在IE7中不適用於我。它只有在輸入是顯示時才起作用：無; – stephenway

不，這是不可能的。複選框的外觀是OS和瀏覽器特定的。只有基於JavaScript的解決方案才能讓您以適用於所有瀏覽器的方式進行設計。

您可能會喜歡this plugin。它很容易使用，並給出令人滿意的結果。

來源

2011-06-29 11:35:35 mingos

您可以使用CSS3（僅適用於Chrome或Safari！）對其進行設計，但適用於任何其他方式 - 沒有其他方式適用於js。

有40+的例子在這裏：FORMS ENHANCEMENTS DEMOS

有一些插件 - 我用jNice - 不只是純粹的CSS3現代瀏覽器，併爲別的標準複選框/下拉。

最好的問候，

皮特

來源

2011-06-29 11:35:50 Iladarsda

複選框的CSS樣式

回答

相關問題