0

I have a strange issue and I am not sure where to look for a fix. Googling is not leading to any answers.

I have some CSS to make the selected radio button purple. Easy right? However, it is blue. Even though the CSS is clearly in the inspector as purple. Even trying to force style in the browser just to change it doesn't work. Why would this be? I've never seen where it clearly is using the right CSS but not actually rendering. This is happening on multiple browsers.

My code is in Elementor:

selector input[type="radio"]:checked, input[type=reset], input[type="checkbox"]:checked, input[type="checkbox"]:hover:checked, input[type="checkbox"]:focus:checked, input[type=range]::-webkit-slider-thumb {
    border-color: #9710A6 !important;
    background-color: #9710A6 !important;
    box-shadow: none;
}

Which shows up perfectly in the inspector:

.elementor-1202 .elementor-element.elementor-element-f11e2ef input[type="radio"]:checked, input[type=reset], input[type="checkbox"]:checked, input[type="checkbox"]:hover:checked, input[type="checkbox"]:focus:checked, input[type=range]::-webkit-slider-thumb {
    border-color: #9710A6 !important;
    background-color: #9710A6 !important;
    box-shadow: none;
}

And shows as what is being computed in console.

background-color
rgb(151, 16, 166)
#9710A6 !important.elementor-1202 .elementor-element.elementor-element-f11e2ef input[type="radio"]:checked, input[type=reset], input[type="checkbox"]:checked, input[type="checkbox"]:hover:checked, input[type="checkbox"]:focus:checked, input[type=range]::-webkit-slider-thumb

And yet when I look at it is is blue. Using a color selecting tool it returns: 0075FF - I think it is the default browser blue.

Is there a way to have maybe some JS running or something changing it that would not show up in the console? If it was JS changing it wouldn't the result "computed" value change?

So strange, any ideas or help you can offer would be really appreciated. Thanks so much!

user1518699
  • 385
  • 2
  • 8
  • 20
  • Does this answer your question? [How do I change the color of radio buttons?](https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons) - Basically there is no way to style radio buttons with CSS, it's a native element specific to each OS/browser. The blue you're seeing is the default color. You can change visibility to hidden and add a ```:before``` selector to style your own custom radio button. – Carlton Lindsay Nov 18 '21 at 06:01
  • Yes it does! Thanks, that would explain the strange results when searching around. It is really odd however that you cannot change these elements directly with CSS. Thanks again! – user1518699 Nov 18 '21 at 20:40

1 Answers1

0

Thanks to Carlton Lindsay for the answer.

It appears you cannot change the radio button directly with CSS. Instead, hide the default button and create a new one using :before to add one back in it's place.

This seems like really strange way to do it. But it is how it is done for now. Hopefully things change soon in the browsers so you can directly manipulate the style through CSS.

user1518699
  • 385
  • 2
  • 8
  • 20