复选框的图像替换 [英] Image replacement for Checkbox

问题描述

我正在尝试将自定义图片用于复选框，如本问题所述:

I'm trying to use a custom image for checkboxes, as discussed in this question:

纯CSS复选框图像替换

我的复选框显示在网格中，因此不需要与之关联的标签.但是，我发现如果没有标签，该问题中讨论的技术将无法正常工作.

My checkboxes appear in a grid, so don't need a label associated with them. However, I find that if the label isn't present, the technique discussed in that question doesn't work.

例如，这是相关的CSS:

For example, here's the relevant 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不会渲染图像:

Declaring just a simple input doesn't render the image:

<input type="checkbox">

但是，如果我修改css，附加+ label并在标记中附加标签，如解决方案中所讨论的那样，它将起作用:

However, if I modify the css, appending the + label, and append a label to the markup, as discussed in the solution, it works:

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>

这将按预期方式呈现.

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

Why does the first solution not work?

如何在无需添加不需要的标签的情况下实现这一目标?

How can I acheive this without having to add labels that aren't required?

推荐答案

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

You left the following in your first example:

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

这将使其不呈现".

现在，删除那种琐碎的小样式后，您可能会问

Now, having removed that trifling little style, you'll likely ask

好吧，该控件现在显示出来了...那么，为什么背景图像没有显示出来?

Okay, the control shows up now... so, why doesn't the background image show up?

那是因为您对样式单选按钮，复选框，组合框，文件上载控件等没有真正的控制权.标签解决方案之所以有效，是因为您可以愉快地将标签样式化为CSS的全部范围.我提到的控件?没那么多...

That's because you don't have any real control over how radio-buttons, check-boxes, combo-boxes, file-upload controls, etc are styled. The label solution works because you can happily style a label to the full extent of css. The controls I've mentioned? Not so much...

这篇关于复选框的图像替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！