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:

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

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

回答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

回答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; }

来源：https://stackoverflow.com/questions/12838325/how-to-remove-border-outline-from-focused-radio-input-in-firefox-on-linux

标签

css

firefox

radio-button

outline