27

In Chrome and other browsers my dropdown looks fine:

enter image description here

However, in Firefox it has unwanted dotted lines:

enter image description here

I have successfully removed the unwanted Firefox dotted lines for buttons and input elements with these CSS statements:

button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }

so I thought these would work for the select/option elements, but they don't:

select::-moz-focus-inner { border: 0; }
option::-moz-focus-inner { border: 0; }

How can I remove the dotted lines in this dropdown so that it appears as in Chrome and other browsers?

Addendum

These don't work either:

select::-moz-focus-inner { border: 0; outline: 0 }
option::-moz-focus-inner { border: 0; outline: 0 }

nor these:

select { outline: 0; }
option { outline: 0; }

nor these: 

select { outline: none; }
option { outline: none; }
Undo
  • 25,519
  • 37
  • 106
  • 129
Edward Tanguay
  • 189,012
  • 314
  • 712
  • 1,047
  • Possible duplicate of [Remove outline from select box in FF](https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff) – Nick Grealy Mar 27 '18 at 00:25

5 Answers5

9

James Broad's answer is nearly perfect, but the "shadow-only" text for the option items looks ugly. This is what works perfectly for me:

select:-moz-focusring {
  color:transparent;
  text-shadow:0 0 0 #000; /* your normal text color here */
}
select:-moz-focusring * {
  color:#000; /* your normal text color here */
  text-shadow:none;
}
istr
  • 171
  • 1
  • 2
  • If you you are using Bootstrap or have any transitions on your input, don't forget to add ```transition: color 0ms;```, or else you will see the dotted line fade out. – Micros Dec 16 '15 at 14:57
5

Here's combined hack for that:

select:focus {
    outline: 1px solid white;
    outline-offset: -2px;
}
select ~ input[type=button] {
    -moz-appearance: menulist-button;
    margin-left: -19px;
    width: 18px;
    height: 18px;
    z-index: 10;
}

Then add input with tabindex=0 after each select And some code for focus "delegation":

$("select ~ input[type=button]").addEvent('focus', function(){
  this.getPrevious().focus();
});
kirilloid
  • 14,011
  • 6
  • 38
  • 52
  • It doesn't work after 2 years on another platform (I tried on WinXP and recent FF version for that time), is it? I consider it is ok for hacks... Thanks for information anyway. – kirilloid May 08 '13 at 12:30
4

the solution found on https://stackoverflow.com/a/18853002/728855 seems to work perfectly.

In short:

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Where #000 is your text colour.

Community
  • 1
  • 1
James Broad
  • 1,210
  • 12
  • 17
  • This won't work when building a reusable component - you can't know the text colour there. It has to be inherited, and because you're setting `color`, the `currentColor` property can't be used. – Thany Oct 14 '16 at 15:58
0

In case of using with required, like the code below:

<select required="true">
    <option value="" selected="true" disabled="true" hidden="true">Select a Option</option>
    <option value="">Option</option>
</select>

You will need set the same parameters for select:required:invalid like below:

select {
  &:required {
    &:invalid {
      color: transparent;
      text-shadow: 0 0 0 rgba(0, 0, 0, .4);
    }
  }

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 rgba(0, 0, 0, .4);
  }
}
Bruno Wego
  • 2,099
  • 3
  • 21
  • 38
-5

try using outline: 0, works for buttons

Code Lღver
  • 15,573
  • 16
  • 56
  • 75
exus
  • 215
  • 1
  • 10