Remove dotted border/outline of focused dropdown menu

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

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!