带有自定义图像CSS代码的复选框无效 [英] Checkbox with custom image CSS code not working

问题描述

我正在尝试添加自定义图像到复选框，我使用的代码：

I am trying to add a custom image to a checkbox and I'm using this code:

input[type=checkbox] {
    display:none;
  }

input[type=checkbox] + label
   {
       background-image: url("../images/checkbox-bg.png") no-repeat 0 0;
       height: 16px;
       width: 16px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

路径正确，但图片甚至没有显示。

The path is right but the image is not even showing.

我需要该图片显示在标签左侧。

I need the image to appear to the left of the label.

任何人都可以看到上面的代码有问题吗？

Can anyone see a problem on the code above please?

感谢

以下是HTML：

<input type="checkbox" value="1" /><label>The Label</label>

推荐答案

，您应该使用 background 而不是 background-image 。
也因为我知道背景位置应该出现之前重复选项。但我不确定。尝试。

when you want to set position and repeat option for background, you should use background instead of background-image. also as I know the background position should appear before repeat option. but I am not sure. try it.

background: url("../images/checkbox-bg.png") top left no-repeat;

并且不要忘记，如果你的css选择器在一个单独的样式表文件中，图像路径应该是相对的到您的.css文件的地址！如果你把CSS选择器放在你的html页面，图像路径应该是相对于你的html文件！

and do not forget, if your css selector is in a seperate stylesheet file, image path should be relative to address of your .css file! if you placed your css selector in you html page, image path should be relative to your html file!

这篇关于带有自定义图像CSS代码的复选框无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！