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. stackoverflow.com/questions/5041494/… — vrluckyin
– vrluckyin, Commented Apr 19, 2018 at 18:30

August · Accepted Answer · 2018-04-19 20:19:00Z

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, 2018 at 20:19

August

2,12312 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1