select/option html tag dotted outline problem in firefox

Question

button::-moz-focus-inner { border: 0; } works for buttons...

what about for select/option html tag?

i try everything what is here: How to remove Firefox's dotted outline on BUTTONS as well as links?

but i open new question becouse there is talking about buttons...

How are non-pointer users supposed to know where they are about to 'click' if you hide the focus ring? — Quentin, Mar 04 '11 at 11:45
It does not have to be a black dotted ring, does it? It could be, for example, a distinct background or a different font color. If people want to mess with enforced defaults -- they can find a way to do it (e.g. use javascript to simulate — naktinis, Sep 02 '11 at 16:26
@Quentin, there are other ways to show the user where focus is without these built-in (and in my opinion, ugly) styles. Users can easily apply rules to `:focus` and/or `:active` pseudo-classes. — Philip Walton, Oct 15 '11 at 00:36
@Philip Walton — There are, but how many authors who remove the default put something else in its place? And users cannot *easily* apply their own rules, most don't even know that they can. — Quentin, Oct 15 '11 at 07:25

score 1 · Answer 1 · answered Aug 31 '13 at 23:59

1

  select, option {
        border: 0 none;
        outline: 1px none;
    }

always works for me.

answered Aug 31 '13 at 23:59

THE AMAZING

1,496
2
16
38

score 0 · Answer 2 · answered May 10 '12 at 16:37

As of Firefox 11.0 the dotted outline around the select, option and button elements no longer exists, as far as I can tell by tests performed under Win7 with FF 11.0, and under Ubuntu 12.04 with FF 12.0.

Also noticed that around links like does of a Google Search Result Pagination Numbers, the dotted outline does not appear for the same versions of Firefox.

Seems to be an issue being dealt with by the Mozilla Firefox.

Made this Fiddle to test it!

score 0 · Answer 3 · answered Nov 05 '12 at 17:39

0

select:-moz-focusring { color: transparent; }

This works. It's weird becuase the element you're seeing is :-moz-focusring but even if you use outline or border properties overwriting, the dotted line won't dissapear. Since the dotted line color depends on the color of the select, you can use this pseudo selector to put a transparent color (and make it invisible) but still have the original color in the select box text.

answered Nov 05 '12 at 17:39

Tom Roggero

5,777
1
32
39

1

Bad notice: it makes the label invisible on focus. CRAP! – Tom Roggero Nov 06 '12 at 21:01
2

With some work, this is THE solution: http://stackoverflow.com/a/18853002/1251219 – Fleshgrinder Sep 17 '13 at 14:46
Makes the whole text disappear on my FF 25, windows 7 – vsync Nov 18 '13 at 10:54

score 0 · Answer 4 · answered Aug 26 '13 at 15:50

0

Try this:


    select, option {
        border: 0 none;
        outline: 1px none;
    }

answered Aug 26 '13 at 15:50

Mikey

1
1

score 0 · Answer 5 · answered Mar 04 '11 at 11:43

0

Have you tried

select, option {outline:0}

answered Mar 04 '11 at 11:43

Mark Steggles

5,369
8
40
50

select/option html tag dotted outline problem in firefox

5 Answers5