19

How do you remove the dotted border/outline that is shown when selecting an item from a dropdown menu?

enter image description here

You can see there is a dotted border/outline shown, I want to remove this (screenshot taken in Firefox).

Trying the solution below did not remove it:

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

The HTML is just simply this:

<select name="order">
   <option value="desc">Newest to oldest</option>
   <option value="asc">Oldest to newest</option>
</select>
MacMac
  • 34,294
  • 55
  • 151
  • 222

2 Answers2

16

Add the following to your stylesheet. - 

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

Has always worked for me, hope it helps!

typo
  • 1,041
  • 11
  • 15
10

On windows 7 and IE9 no border/outline is shown, Instead a blue background is shown. The blue background and in your case the border/outline is managed by the OS. I suspect your are on a Mac?

Remove outline from select box in FF

How to remove Firefox's dotted outline on BUTTONS as well as links?

Community
  • 1
  • 1
Jawad
  • 8,352
  • 10
  • 40
  • 45