我正在尝试使用复选框的自定义图像，如本问题所述：
纯CSS复选框图像替换 https://stackoverflow.com/questions/3772273/pure-css-checkbox-image-replacement
我的复选框出现在网格中，因此不需要与它们关联的标签。但是，我发现如果标签不存在，则该问题中讨论的技术不起作用。
例如，这是相关的 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>
这将按预期呈现。
为什么第一个解决方案不起作用？
如何在不添加不需要的标签的情况下实现这一目标？
您在第一个示例中留下了以下内容：
input[type=checkbox] {
opacity: 0;
}
这样就可以了“不渲染。”
现在，去掉了那个琐碎的小风格后，你可能会问
好的，控件现在显示了...那么，为什么背景图像不显示呢？
这是因为您无法真正控制单选按钮、复选框、组合框、文件上传控件等的样式。标签解决方案之所以有效，是因为您可以愉快地将标签样式设置为 CSS 的完整范围。我提到的控件？没那么多...
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
