0

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!

Zedd
  • 2,069
  • 2
  • 15
  • 35
  • Instead of giving styles to pseudo classes, you can give a classname to the labels and update its style(or style of before or after) using that class name ? – Abin Thaha Jul 07 '21 at 04:45
  • @AbinThaha I wish it would be as simple as that and as simple if it were my own HTML code. But remember I'm using Radio toggle component from Semantic UI React. So there's no way that I could give the label a classname because it wouldn't give the style for the ::before of the label. I tried your way by the way it didn't work but thanks. – Zedd Jul 07 '21 at 04:51
  • from the duplicate: https://stackoverflow.com/a/49618941/8620333 – Temani Afif Jul 07 '21 at 09:48

1 Answers1

0

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.

Taj Khan
  • 579
  • 2
  • 7
  • 22
  • Okay. Alright. I acknowledge this concept and I'd like to do this. But adding a classname in the `` component wouldn't give the desired result since the `label` is a children of this component. – Zedd Jul 07 '21 at 05:46
  • you can add class to label itself.. – Taj Khan Jul 07 '21 at 07:27
  • or even if you add class to you can still target the children – Taj Khan Jul 07 '21 at 07:27
  • I tried adding a class to the component (because it's the only accessible element; it's a component! which means I have no access to its children, the `label` tag for that matter, because I'm using Semantic UI React) and styled it using CSS. But, I'm getting the same ugly result again. – Zedd Jul 10 '21 at 09:25