Question

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

/ * 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>

Answer 1

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

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

Answer 2

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

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

如何在输入复选框中使用背景图像？

2 个答案: