使用JQuery更改:before CSS选择器的背景位置 [英] Change the background-position of :before CSS selector with JQuery

问题描述

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

I'm using this for custom radio buttons and checkboxes, but I need to change the :before element's background on click. Is it possible?

HTML

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

CSS(其.less)

CSS (its .less)

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

推荐答案

您无法使用jQuery选择伪元素，我想说最干净的解决方案是使用jQuery操作元素的类:

You can't select pseudo elements with jQuery, I'd say the cleanest solution is to manipulate the class of the element with 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更改:before CSS选择器的背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！