Question

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

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>

Answer 1

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?