Question

我想要完成的事情很简单：通过CSS更改浏览器复选框的布局。可能吗？或者我需要使用javascript吗？怎么样？

提前致谢！

Answer 1

我们在工作中经常做的是创建一个自定义Javascript解决方案（单击时更改颜色的div），它会更改隐藏复选框的值。

这样你就不会被CSS限制，如果Javascript被禁用，它将很好地降级到普通的Checkbox（对于Accessibility来说非常重要）

Answer 2

没关系的人，自己找到了溶剂。

我编写的这个脚本要求你为每个复选框设置一个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提示）

Answer 3

如果您需要独立于浏览器，请选择自定义控件。

看看

jQuery custom styled checkbox

如果你不想要基于jQuery的那个，那么找

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

Answer 4

用css是不可能的，你必须使用javascript。我真的推荐fancy-form

css自定义复选框布局

4 个答案: