Cannot remove outline/dotted border from Firefox select drop down

Question

I have a styled down down, but I cannot remove the dotted border when it is clicked in Firefox. I've used outline: none but it still doesn't work. Any ideas?

CSS:

.styled-select {
    background: lightblue;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    position: relative;
    border: 0 none !important;
    outline: 1px none !important;
}
.styled-select select {
   background: transparent;
   border: 0;
   border-radius: 0;
   height: 50px;
   line-height: 50px;
   padding-top: 0; padding-bottom: 0;
   width: 100%;
   -webkit-appearance: none;       
   text-indent: 0.01px;
   text-overflow: '';
   border: 0 none !important;
   outline: 1px none !important;
}

HTML:

<div class="styled-select">
    <select id="select">
        <option value="0">Option one</option>
        <option value="1">Another option</option>
        <option value="2">Select this</option>
        <option value="3">Something good</option>
        <option value="4">Something bad</option>
    </select>
</div>

Please see this jsFiddle.

Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — **in the question itself.** — Kermit, Oct 18 '13 at 13:41
Looked fine in Chrome. Firefox showed a gap between the "Select this" and the dropdown itself. I'm on a corporate computer and stuck with IE8, so Fiddler didn't even come up in IE. LOL! — Doug Dawson, Oct 18 '13 at 13:47
@NathanLee, I've cleared my cache but I still see the dotted border — shrewdbeans, Oct 18 '13 at 13:49
It's to do with firefox. Refer: http://stackoverflow.com/questions/9119629/remove-dotted-border-outline-of-focused-dropdown-menu — darshandzend, Oct 18 '13 at 13:51

score 152 · Accepted Answer · edited Aug 20 '19 at 14:16

152

Found my answer here: https://stackoverflow.com/a/18853002/1261316

It wasn't set as the correct answer, but it worked perfectly for me:

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

edited Aug 20 '19 at 14:16

mb21

34,845
8
116
142

answered Oct 18 '13 at 13:53

shrewdbeans

11,971
23
69
115

15

(!) this also makes the color of the list items transparent – Simon Jan 28 '14 at 11:47
1

tx, works for me (options are visible in FF 29 OSX) – ptim Jun 04 '14 at 06:22
Grate , does what it should do , thanks . FF ubuntu 14 lts – Dragutescu Alexandru Oct 05 '15 at 11:29
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 at the moment you focus on the select box! – Micros Dec 16 '15 at 14:58
@Simon: you're right, it does. I found that the best way to avoid that is to use two additional rules: `option { text-shadow: none }` to undo the shadow effect, and `option:not(:checked) { color: #000; }` - *or whatever the normal text color is* - to reset the color. *Not checked*, because the selected option should get its color and background from the user agent stylesheet. – Zilk Jan 14 '16 at 20:48
@shrewdbeans Thanks for sharing, it's solve my issue to :) – Tsurule Vol Sep 20 '17 at 14:45

score -2 · Answer 2 · edited Mar 04 '14 at 14:22

-2

This will help you. Place it on top of your style sheet.

/**
* Address `outline` inconsistency between Chrome and other browsers.
*/

a:focus {
    outline:0;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

edited Mar 04 '14 at 14:22

Migol

8,161
8
47
69

answered Oct 18 '13 at 13:52

8

What about a `Firefox select drop down` like asked in the question? – complistic Mar 01 '14 at 03:40
It works with my bootstrap selectpicker. Thank you – S.M. Pat May 07 '18 at 02:30

Cannot remove outline/dotted border from Firefox select drop down

2 Answers2