Radio Button Not Respecting CSS - html

Question

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!

Answer 1

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.