Remove blue accessibility outline when radio buttons are clicked

Hey guys, having a small visual problem when clicking the form buttons on the published website :
In the form section, when a radio button is focused, there’s a blue accessibility outline showing.
From my understanding it is a browser thing, but I would like to know how I could hide it, since it doesn’t render well on the design.

I already tried the :focus outline: none technique, as you will see in the website, but for an unknown reason it doesn’t work.

Thanks in advance and don’t hesitate to ask if you need more informations.

Here’s the published website : Home V2

outline


Here is my site Read-Only: link

You should be able to get rid of this by editing the “Focussed” state of the radio buttons. As at the moment the focussed state is added the blue box shadow to the element. :slight_smile:

See state in the screenshot.

2 Likes

Thanks a lot for your time, it worked. Since there was no little blue dot next to the focused state, my dumb brain thought that there was no style added to it and proceeded to find another solution :upside_down_face:

Thanks again mate !