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

Question

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:

<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.

Overlarge

Did you try look at this? w3schools.com/cssref/pr_outline.asp I have no Linux at hand so I can't readily test... – Operation

@IvanLYes, I tried to set outline, border on this inputs, but nothing helped. – Overlarge

Ok how about trying -moz-appearance: none ? Sorry for spawning ideas without being able to verify them. – Operation

@Operation that make radio ugly, it removes outline but all other styles are removed as well, is there a way to remove only outlline? – Overlarge

I'm afraid you might have run into this then: bugzilla.mozilla.org/show_bug.cgi?id=605985 – Operation

I tend to confer with IvanL - just tested it with: FF on x64 Linux Mint 12. It works just fine - none of the artefacts you've shown. userAgent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:12.0) Gecko/20100101 Firefox/12.0 platform: Linux x86_64 – Wiltshire

@enhzflep, sorry, do you mean that -moz-appearance: none works well? – Overlarge

@caligula - I just opened up your fiddle as is. It looked just fine - that is to say, I don't see the red outlines when I focus them. Kb or mouse, doesn't matter - they look just they should. If I add input{-moz-appearance: none;} to the css then they take on a flat look and loose the green halo - they turn monochrome and look very Windows98ish. But in neither case do they have a square outline as your image shows. I'll add an image to an 'answer' – Wiltshire

@enhzflep, I use Ubuntu. May be this matters, so not all Linux distros have this. – Overlarge

Guess so, Mint is debian-based, but I suppose as is so often the case, the devil's in the details. So, it's a problem that won't bite everyone, but if you absolutely need to avoid it, I suggest using a 'home-brew' implementation that allows you to specify your own 4 images for focused or not and selected or not. I think I've seen a Q around here that uses that approach, albeit for different reasons to yours. – Wiltshire

Answer 1

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.

Silicle

Answer 2

Further to my coments above, here's what I see when I view in FF.

Here's what the OS tells me when I goto SystemInfo->Operating system (in case it makes a difference)

-Version-
Kernel      : Linux 3.2.0-23-generic (x86_64)
Compiled        : #36-Ubuntu SMP Tue Apr 10 20:39:51 UTC 2012
C Library       : Unknown
Default C Compiler      : GNU C Compiler version 4.6.3 (Ubuntu/Linaro 4.6.3-1ubuntu5) 
Distribution        : Linux Mint 13 Maya
-Current Session-
Computer Name       : enhzflep-VirtualBox
User Name       : enhzflep (*****)
Home Directory      : /home/enhzflep
Desktop Environment     : MATE
-Misc-
Uptime      : 57 minutes
Load Average        : 0.60, 0.52, 0.42

Wiltshire

Answer 3

input, 
input:active,
 input:focus,
a:focus{ outline: 0; outline-style:none; outline-width:0; }


 button::-moz-focus-inner,
 input[type="reset"]::-moz-focus-inner,
 input[type="button"]::-moz-focus-inner,
 input[type="submit"]::-moz-focus-inner,
 input[type="file"] > input[type="button"]::-moz-focus-inner,
a
 { border: none; }

Overt