Question

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

我的复选框显示在网格中，因此不需要与其关联的标签。但是，我发现如果标签不存在，那个问题中讨论的技术就不起作用了。

例如，这是相关的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>

这会按预期呈现。

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

如何在不添加不需要的标签的情况下实现此目的？

Answer 1

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

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

这将使“无法渲染。”

现在，除去那些微不足道的小风格，你可能会问

好的，控件现在出现了......那么，为什么背景图像不显示？

那是因为你没有真正控制如何设置无线电按钮，复选框，组合框，文件上传控件等的样式。标签解决方案有效，因为您可以愉快地将标签设置为css的完整范围。我提到的控件？没那么多......

Answer 2

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

Checkbox的图像替换

2 个答案: