CODEWITHSUNDEEP
css
MacMac
MacMac

Reputation: 35361

Remove dotted border/outline of focused dropdown menu

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>

Upvotes: 19

Views: 43594

Answers (2)

typo
typo

Reputation: 1071

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!

Upvotes: 16

Jawad
Jawad

Reputation: 6672

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?

Upvotes: 10

Related Questions