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这将很好地降低到正常复选框（用于辅助功能很重要）