Search code examples
javascriptcssreactjscss-selectorssemantic-ui-react

How to get the ::before inside the label HTML tag using vanilla Javascript?

I'm using semantic-ui-react for my UI. I didn't like the color of the Radio (toggle) so I customized it using CSS:

.radio-toggle .ui.toggle.checkbox input:checked ~ label:before,
.radio-toggle .ui.toggle.checkbox input:focus:checked ~ label:before {
    background: saddlebrown !important;
}

This works but I needed to select this using Javascript because I needed to pass a dynamic value for the background(-color). I tried doing this:

const label = document.querySelector('label');
console.log(label);

And I got this: enter image description here

Is there a way that I could select that ::before inside the label tag using vanillaJS like what I've been doing in CSS so that I could style it dynamically (dynamically because I have a feature that lets my users change the themeColor of my website)?

I'm actually using ReactJS & I know that it's not a good practice to use vanillaJS when you're already using React. So I tried this too:

<Radio toggle style={{ background: 'red' }} />

But the result is ugly: enter image description here

Please help. If there's a React solution for this one, that would be nicer. But if it's vanillaJS, that'll be fine. Thanks in advance!

Solution

  • Selecting pseudo element is not possible as the name suggest (its pseudo). the best you can do is simple toggle a class to label and style it using css.