CSS自定義複選框佈局

Question

我想完成的事情很簡單：通過CSS更改瀏覽器複選框的佈局。可能嗎？或者我需要使用JavaScript的呢？如何？

在此先感謝！

Answer 1

沒關係研究員這樣一來，發現我自己的sollution。

我編寫的這個腳本要求你爲每個複選框設置一個div/span，每個佈局使用「checked」和「unchecked」類以及每個複選框中的onclick事件，並使用以下代碼（即'b_availcheck'相應的複選框的id）：

<div class="checked" onclick="javascript:change_checkbox(this, 'b_availcheck');"></div> 

的JavaScript：

function hide_checkboxes() { 
    var checkboxes = document.getElementsByTagName('input'); 
    for (var i = 0; i < checkboxes.length; i++) { 
     if (checkboxes[i].type == 'checkbox') { 
      checkboxes[i].style.visibility = 'hidden'; 
     } 
    } 
} 

function change_checkbox(e, target) { 
    if (e.className == 'checked') { 
     document.getElementById(target).checked=false; 
     e.className = 'unchecked'; 
    } 
    else { 
     document.getElementById(target).checked=true; 
     e.className = 'checked'; 
    } 
} 

window.onload = hide_checkboxes; 

這個腳本附加一個onload事件的窗口，所以默認複選框得到隱藏在開始..另外，如果JavaScript被禁用，默認的複選框將起作用，而不是這個（很多感謝Tigraine的提示）

Answer 2

如果您需要獨立於瀏覽器的自定義控件。

看一看

jQuery custom styled checkbox

如果你不想要一個基於jQuery的一個，然後尋找

Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

Answer 3

這是不可能的CSS，你必須使用JavaScript 。我真的推薦fancy-form

Answer 4

我們通常在工作中做的是創建一個自定義Javascript解決方案（一個點擊時改變顏色的div），它改變了隱藏複選框的值。

你沒有被限制CSS，如果已禁用Javascript這將很好地降低到正常複選框（用於輔助功能很重要）