复选框以自定义图像CSS代码不工作

问题描述：

我想自定义图像添加到一个复选框，我使用此代码：复选框以自定义图像CSS代码不工作

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; 
    }

的路径是正确的，但图像没有甚至呈现。

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

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

感谢

下面是HTML：

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

写你的HTML代码也..你想要图像？ **代替**复选框或**在**复选框前面？ – diEcho 2011-04-18 11:22:25

该标签仍然是一个问题，因为它在图像下方，而不在右侧。 – Satch3000 2011-04-18 11:34:00

是否有标签在其他地方的HTML或只有复选框 – diEcho 2011-04-18 11:35:34

答

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

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

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

我加了你的答案，还有：width：220px; ...虽然它更好，但标签仍然在复选框图像下启动。 – Satch3000 2011-04-18 11:45:42

你为什么不改变显示：inline-block;显示：内联？或者你可以上传图片吗？ – 2011-04-18 12:01:30

答

尝试使用替代的背景图像。

background: url("") no-repeat 0 0;

如果失败也加上;

display: block;

并将其定位或浮动。

答

您正试图将background简写格式分配给background-image属性。

下...

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

...应改为：

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

您也可以尝试验证的CSS明白我的意思：http://jigsaw.w3.org/css-validator/

你可以详细了解w3C上的background shorthand property和background-image property：

复选框以自定义图像CSS代码不工作

相关推荐