如何在输入复选框中使用背景图像？ [复制]答案

【问题标题】：How can I use background image in input checkbox? [duplicate]如何在输入复选框中使用背景图像？ [复制]
【发布时间】：2014-03-11 09:31:18
【问题描述】：

我想在复选框中使用背景图片。我尝试了一些东西，但它不起作用。我正在尝试以下。

/* css */

.common_pic input[type=checkbox] {
 background: url("images/checkbox.png") no-repeat scroll left top rgba(0, 0, 0, 0);
 display: inline-block;
 float: right;
 height: 27px;
 margin-left: 0;
 margin-top: 29px;
 width: 27px;
 }

HTML

      <div class="common_pic">           
  development
    <input type="checkbox" name="vehicle" value="Car">
</div>

【问题讨论】：

标签： css

【解决方案1】：

最好的办法是完全隐藏复选框（使用display: none 或更恰当的visibility: hidden;），并使用带有背景图像的<label> 元素来切换状态。

当复选框的状态发生变化时，您仍然需要使用某种 JavaScript 来更改背景。（因为 CSS 中没有“父选择器”）。

【讨论】：

【解决方案2】：

你不能：浏览器使用系统 API 来绘制复选框，它根本不支持背景。

您可以做一些解决方法，即在复选框上设置opacity: 0 并在其后面绘制选中/未选中的图像。

【讨论】：

jqueryui.com/button/#checkbox - 是的，这些是复选框。
@MadaraUchiha：不-那些不是复选框：jQuery UI 将它们替换为跨度，这只是另一种解决方法。正如OP要求的那样，它不能用CSS来完成。
OP从来没有说过他想要一个纯 CSS解决方案，这是真的，它不能用纯CSS干净完美地完成，你可以接近，但有一些琐碎的接触即使没有跨度，JavaScript 也是完全可能的。
另外，链接的副本另有建议
@MadaraUchiha：他只指定了css 标签。但是哇，副本中的答案太棒了！