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

【问题标题】：css custom checkbox layout [closed]CSS自定义复选框布局[关闭]
【发布时间】：2012-09-27 05:07:45
【问题描述】：

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

提前致谢！

【问题讨论】：

浏览器复选框是什么意思？
复选框布局？请详细解释您的问题。
您要更改复选框的默认 3d 外观吗？
每个浏览器都有自己的复选框外观，我想为所有浏览器创建一个全局外观。我已经对此进行了搜索，看起来唯一的方法是使用 javascript，使用图像创建一个 div/span 并使用 onclick 更改输入 type="checkbox"的值“checked” >
如果你只为Safari和Chrome拍摄then here is a pure CSS solution。

标签： html css layout checkbox

【解决方案1】：

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

这样你就不会受到 CSS 的限制，如果禁用 Javascript，它会很好地降级为普通复选框（对于可访问性非常重要）

【讨论】：

+1 渐进增强仅胜过 JS。然而，重新实现表单控件仍然可能存在可访问性问题；例如 yoda 的示例代码不能像真正的复选框一样由键盘控制。

【解决方案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 的提示）

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果您需要独立于浏览器的自定义控件。

看看

jQuery custom styled checkbox

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

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

【讨论】：

我想要一个没有 JQuery 的更好的解决方案。我知道如何在该框架中执行此操作，但在这种情况下无需使用它，因为我需要的唯一 javascript 就是用于此目的。
phoenix，你的第二个例子为了简单的事情使用了太多的代码，而第三个例子实际上使用了 jquery。