复选框作为图像 - 背景颜色

Question

我已按照此链接查看图像复选框

http://jsfiddle.net/jtbowden/xP2Ns/。脚本和CSS工作得很好。

.checkbox, .radio {
    width: 19px;
    height: 20px;
    padding: 0px;
    background: url("http://i48.tinypic.com/raz13m.jpg");
    display: block;
    clear: left;
    float: left;
 }

如果用户点击Checkbox，我的问题是尝试设置background-color：

.green {
    background-color: green;
 }

背景颜色看起来并不像我预期的那样，我正在寻找与小提琴相同的颜色。

我该如何解决这个问题还是我会错过什么？

在我的HTML中，我给出了

<p>
    <input type="checkbox" name="1" class="styled green" />(green)
<p>

但它仍适用于整个SPAN。我不确定到底出了什么问题！

Answer 1

您必须为background-color设置span，而不是checkbox。

例如，您可以这样做（对于.purple）：

<强> JQuery的

if($(this).hasClass("purple")){
    $(this).css("background-color", "green");
}

JSFiddle

Answer 2

你可以使用一个类来了解背景颜色（例如绿色），在DoCheck函数中你可以检查类并添加一个包含背景的新类（例如greenchecked）。

您可以对其他颜色使用相同的方法。

示例：

.greencheck {
    background-color: green;
}

function doCheck() {
    if ($(this).hasClass('checked')) {
        $(this).removeClass('checked');
        if($(this).hasClass('green')){
            $(this).removeClass('greencheck');
        }
        $(this).children().prop("checked", false);
    } else {
        $(this).addClass('checked');
        if($(this).hasClass('green')){
            $(this).addClass('greencheck');
        }
        $(this).children().prop("checked", true);
    }

这是一个工作小提琴：http://jsfiddle.net/xP2Ns/1241/