复选框的图像替换答案

【问题标题】：Image replacement for Checkbox复选框的图像替换
【发布时间】：2012-06-06 07:20:12
【问题描述】：

我正在尝试为复选框使用自定义图像，如本问题所述：

我的复选框出现在网格中，因此不需要与它们关联的标签。但是，我发现如果标签不存在，则该问题中讨论的技术不起作用。

例如，下面是相关的 css：

input[type=checkbox] {
    opacity: 0;
}

input[type=checkbox]  {
    height: 17px;
    width: 17px;
    background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat;
}

input[type=checkbox]:checked {
    background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat;
    height: 17px;
    width: 17px;
    padding: 0 0 0 0px;
}

仅声明一个简单的input 不会呈现图像：

<input type="checkbox">

但是，如果我修改 css，附加 + label，并将标签附加到标记中，如解决方案中所述，它可以工作：

input[type=checkbox] {
    opacity: 0;
}

input[type=checkbox] + label {
    height: 17px;
    width: 17px;
    background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat;
}

input[type=checkbox]:checked + label  {
    background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat;
    height: 17px;
    width: 17px;
    padding: 0 0 0 0px;
}

<input type="checkbox"><label></label>

这按预期呈现。

为什么第一个解决方案不起作用？

如何在不添加不需要的标签的情况下实现这一点？

【问题讨论】：

标签： html css

【解决方案1】：

我不是专家，但是，如果您将所有输入复选框设置为 0 不透明度，是否会有效地隐藏整个复选框？不妨试试这篇文章中提到的方法：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

【讨论】：

该解决方案使用 javascript 并且仍然注入额外的 dom 节点......这是 OP 试图避免的。

【解决方案2】：

您在第一个示例中留下了以下内容：

input[type=checkbox] {
    opacity: 0;
}

这会让它“不渲染”。

现在，去掉那个琐碎的小样式，你可能会问

好的，控件现在出现了……那么，为什么背景图片没有出现？

这是因为您无法真正控制单选按钮、复选框、组合框、文件上传控件等的样式。标签解决方案之所以有效，是因为您可以愉快地为标签设置样式以完全使用 CSS。我提到的控件？没那么多……

【讨论】：

谢谢！其他问题/答案没有明确（您有）是该解决方案没有设置复选框的样式，而是设置了标签的样式。复选框被隐藏。这一切都只是烟消云散。