Change the background-position of :before CSS selector with JQuery

Question

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

Your CSS has some mistakes. You can't put input & :before inside .checkbox. It needs to be a class of it's own. — VVV, Oct 11 '12 at 16:16
Related: http://stackoverflow.com/questions/3743513/how-do-i-access-style-properties-of-pseudo-elements-with-jquery — Jason M. Batchelor, Oct 11 '12 at 16:26

score 2 · Accepted Answer · answered Oct 11 '12 at 16:26

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

Then:

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

Something like in this jsFiddle: http://jsfiddle.net/mori57/S5McL/ (That's a neat way to mod :before, infensus!) — Jason M. Batchelor, Oct 11 '12 at 16:33

Change the background-position of :before CSS selector with JQuery

1 Answers1

Linked