Search code examples
cssfirefoxradio-buttonoutline

How to remove border / outline from focused radio input in Firefox on Linux

I know that there are pretty much answers on similar questions on SO but none of them seems to work for me. The problem is that in Firefox only on Linux (Windows is fine) radio inputs have an orange outline when focused. This outline is buggy when input is placed inside element with overflow: hidden: buggy outline when placed inside element with overflow-hidden

<div style="width: 100px; margin: 30px auto; overflow: hidden;">
    <label><input type="radio" name="some_radio">radio 1</label>
    <br>
    <label><input type="radio" name="some_radio">radio 2</label>
</div>

So how can I get rid of that outline, can anyone help? I've tried input::-moz-focus-inner, ::-moz-focusring etc. but nothing worked.

Here is jsFiddle, but you can see the issue only if you use Linux.

Solution

  • That's drawn by your GTK theme.

    You can turn off use of the GTK theme altogether with -moz-appearance: none, but you can't pick and choose parts of the theme to use: the theme infrastructure doesn't really allow that.