2

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

纯 CSS 复选框图像替换

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

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

这按预期呈现。

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

我怎样才能在不添加不需要的标签的情况下实现这一点？

4

2 回答 2

3

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

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

这将使它“不渲染”。

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

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

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

于 2012-06-01T02:42:12.367 回答
0

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

于 2012-06-01T02:46:44.477 回答