Pregunta

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.

¿Fue útil?

Solución

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.

Otros consejos

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

enter image description here

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
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; }
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top