Html 使用背景图像作为复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37582952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using a background-image for checkbox
提问by tylerbhughes
I'm trying to setup some checkboxes so that when not checked they use one image that I've got and then when checked they used another image. Here's my current checkboxes:
我正在尝试设置一些复选框，以便在未选中时使用我拥有的一个图像，然后在选中时使用另一个图像。这是我当前的复选框：
<input type="checkbox" name="fordCheckBox" value="Ford">
I'm also using the following CSS in order to set the background image for each checkbox.
我还使用以下 CSS 来为每个复选框设置背景图像。
input[type=checkbox][name=fordCheckBox] {
background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
height: 25px;
width: 25px;
background-size: 50%;
}
input[type=checkbox][name=fordCheckBox]:checked {
background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
height: 25px;
width: 25px;
background-size: 50%;
}
As you can see in my JSFiddle examplethe icons is the correct size but it's never setting the background image like it should be. Any suggestions?
正如您在我的JSFiddle 示例中所看到的，图标的大小是正确的，但它从未像应有的那样设置背景图像。有什么建议？
回答by Malith
You can just do it with label
你可以用标签来做
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
display:inline-block;
padding: 0 0 0 0px;
background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
height: 125px;
width: 125px;;
background-size: 50%;
}
input[type=checkbox]:checked + label {
background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
height: 125px;
width: 125px;
display:inline-block;
background-size: 50%;
}
Html
html
<input type="checkbox" name="fordCheckBox" id="Ford" value="Ford">
<label for="Ford"></label>
Please check updated jsfiddle https://jsfiddle.net/s4nr6q3d/
请检查更新的 jsfiddle https://jsfiddle.net/s4nr6q3d/
回答by jtmingus
You shouldn't actually try and change the checkbox directly; some browsers will always show the default checkbox. How it is typically done is by adding a label for the checkbox that is linked to the inputs id field. For example:
您实际上不应该尝试直接更改复选框；某些浏览器将始终显示默认复选框。通常的做法是为链接到输入 ID 字段的复选框添加标签。例如：
<input type='checkbox' id='x' name='fordCheckBox'>
<label for='x'></label>
Then you set your checkbox to display: noneand the actual css gets applied to the label instead. Your selectors should look like this: input[type=checkbox]:checked + label
然后您将复选框设置为display: none，实际的 css 将改为应用于标签。您的选择器应如下所示：input[type=checkbox]:checked + label
I found this article that will help explain everything and walk you through it step by step:
我发现这篇文章将有助于解释所有内容并逐步引导您完成：
回答by Saadat
I used this CSS. In this CSS, when checkbox is checked, it puts a tick image on the checkbox. Also it changes the size, color and border of the checkbox by default.
我使用了这个 CSS。在这个 CSS 中，当复选框被选中时，它会在复选框上放置一个勾号图像。默认情况下，它还会更改复选框的大小、颜色和边框。
input[type='checkbox'] {
-webkit-appearance: none;
width: 30px;
height: 30px;
background: white;
border-radius: 5px;
border: 2px solid #555;
vertical-align:middle;
}
input[type='checkbox']:checked {
background-image: url("Images/tick-sm.png");
background-size: 90%;
background-position: right center;
background-repeat: no-repeat;
}
Replace "Images/tick-sm.png" with your own image.
用您自己的图像替换“Images/tick-sm.png”。
If you want a different background for un-checked state too, add the same contents of second block to first block and replace the image.
如果您也想要未选中状态的不同背景，请将第二个块的相同内容添加到第一个块并替换图像。
