CSS自定义复选框布局[关闭]

我们通常在工作中所做的就是创建一个自定义的javascript解决方案(一个在单击时更改颜色的DIV),它可以更改隐藏复选框的值。

这样您就不受CSS的约束,如果禁用javascript,它将很好地降级为一个普通的复选框(对于可访问性非常重要)。

任何人,都是靠我自己找到解决办法的。

我编写的这个脚本要求您对每个复选框都有一个DIV/SPAN,其中类“选中”和“未选中”具有各自的布局,并且每个复选框中都有一个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提供的提示)

使用CSS是不可能的,您必须使用javascript。我真的推荐 fancy-form

如果需要独立于浏览器的控件,请使用自定义控件。

看一看

jQuery custom styled checkbox

如果不需要基于jquery的查询,请查找

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