Question

我正在使用this自定义单选按钮和复选框，但我需要在点击时更改:before元素的背景。有可能吗？

HTML

<div class="checkbox">
<input type="checkbox" value="1" name="test">
</div>

CSS（无。）

.checkbox {
    display: inline-block;
    margin: 0 4px 0 0;
    cursor: pointer;
    text-align: left;
    padding: 0px;

    input { display: none; }

    &:before {
        background: url(/img/checkboxes.png) no-repeat;
        content: "";
        float: left;
        height: 18px;
        width: 19px;
        margin: 0;
    }
}

Answer 1

你不能用jQuery选择伪元素，我会说最干净的解决方案是用jQuery操作元素的类：

.checkbox {
    display: inline-block;
    margin: 0 4px 0 0;
    cursor: pointer;
    text-align: left;
    padding: 0px;

    input { display: none; }

    &:before {
        background: url(/img/checkboxes.png) no-repeat;
        content: "";
        float: left;
        height: 18px;
        width: 19px;
        margin: 0;
    }

    &.someclass:before {
      background-position:0 -55px;
    }
}

然后：

$('.checkbox').addClass('someclass');

使用JQuery更改CSS选择器之前的后台位置

1 个答案: