How to apply/assign pseudo using jQuery

Question

I am trying to assign pseudo to the checkbox dynamically as below the color is not updating to the checkbox, please suggest

item.color = item.options.color;
$('input[type=checkbox]:checked + label::before').css("background-color", item.color);

Below is the CSS for reference where I am planning to put in jQuery as above:

input[type=checkbox]:checked + label::before {background-color:rgb(186,135,200);
  border: none;box-shadow: none;}

Below answer has plugin that adds ::before and ::after dynamically to any element. https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin#answer-45422728 — vrluckyin, Apr 19 '18 at 18:30

score 2 · Answer 1 · answered Apr 19 '18 at 20:19

2

Pseudo elements like :before or :after should have content property specified or will not be rendered:

input[type=checkbox]:checked + label::before {
    content: " ";
    background-color:rgb(186,135,200);
    border: none;
    box-shadow: none;
}

answered Apr 19 '18 at 20:19

August

1 Answers1