Changing "accent-color" on radio button, changes color of space between border and inner circle?
First is how it shows on my end, second is how it should be.
Any ideas what is making it change that small inner color?
10 Replies
Could you share your code? I just did a quick test and didn't notice this happening.
Have had this happen on some browsers too. I wanna say chrome
i checked in the most recent versions of chromium and firefox, can not replicate. maybe safari?
Indeed share your code and let us know the device, os and browser
https://gilded-buttercream-e1e378.netlify.app/ here is the project
Windows 10, Chrome
PC
hmm, it looks like the color is doing that. when i change it to red (in devtools) it shows correctly
so it's specifically the use of the
var() as an accent color?no, that doesnt seem to be it either. i also checked if it is the hsl, but can not find anything.
It could be the browser trying to make it have a better contrast. Maybe try darken the hsl value and see if that changes
--edit: yes that seems to be the case.
with
hsl(61, 70%, 35%) it does not show the black anymoreDamn. xD Thanks again! Will change it up
that is very odd. if the hue value for the hsl is bw 201 and 28, it has that behaviour. but 202 to 360 and 0 to 27 is fine. with those exact sat and lightness values
But also seems to have to do with the lightness property. If i have
hsl(200 50% 50%) it works but hsl(200 50% 55%) it doesnt. Same with saturation. hsl(200 72% 50%) works; hsl(200 73% 50%) doesnt.
Heres a sandbox if anyone wants to play https://codepen.io/Miss-Fox/pen/JjgpbWy?editors=1100Yup. Pretty random behavior. xD Glad few of you got interested in it and found solutions