Remove outline from select box in FF

Question

Is it possible to remove the dotted line surrounding a selected item in a select element?

alt text

I have tried to add the outline property in CSS but it did not work, at least not in FF.

<style>
   select { outline:none; }
</style>

Update
Before you go ahead and remove the outline, please read this.
http://www.outlinenone.com/

three months ago, I searched for the same thing but with a radio button. Over five or six different solutions I've found, nothing worked. So I suspect you cannot do that. I hope I'm wrong. — Arseni Mourzenko, Sep 22 '10 at 20:41
I'm afraid that is the fact too, but still hope to be proven wrong :D — Martin at Mennt, Sep 22 '10 at 20:42
Are there actually human beings working at mozilla who think that stupid dotted line looks good? Why is this even something we have to remove? — But those new buttons though.., May 26 '15 at 20:01

score 165 · Answer 1 · edited Oct 28 '21 at 14:10

165

Well, Duopixel’s answer is plain perfect. If we go a step further we can make it bulletproof.

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

Only valid for Firefox and the ugly dotted outline around the selected option is gone.

edited Oct 28 '21 at 14:10

John

1
13
98
177

answered Sep 17 '13 at 14:46

Fleshgrinder

15,703
4
47
56

1

Interestingly, this solution isn't quite a bulletproof as Duopixel’s answer. If you use a transition effect with your select box (i.e. -moz-transition), the dotted box will appear for the duration of the transition, then disappear. So i.e. if you specify '-moz-transition: all 0.5s ease;', you will see the combobox for half a second with this solution, whereas you wouldn't see it at all with Duopixel’s answer. You can workaround this by setting the entire select element to have a transparent color attribute, but then you won't see any text at all when the box doesn't have focus. – Jon Oct 24 '14 at 19:00
1

Edit: the above should say, "...you will see the *dotted box* for half a second with this solution...". I can't edit the comment anymore. Anyway, the 'color: rgba(0,0,0,0);' property is what fixes the transition, and it *must* be in the select element; '-moz-focusring' won't do. Also interestingly, for some reason I don't have any issues whatsoever in both IE9 and Chrome with Duopixel's solution, so that stuff at the end he was talking about with Modernizr was completely unnecessary for me. – Jon Oct 24 '14 at 19:10
Of course it will appear if you specify a transition. Using `all` within transitions is like firing with a Gatling gun on a fly. – Fleshgrinder Oct 24 '14 at 23:30
1

This or Duopixel's solution doesn't work in FF 33.0.3 in Mac Mavericks. Instead of dotted outline, there is a blue blurred outline. – Timo Kähkönen Nov 10 '14 at 15:11
ha ha ha ha ha, Now this is "mother of hacks" – Hemant_Negi Jul 14 '15 at 11:53
Surely, the dotted border has `currentColor` as its border colour set, which is why this works. So if now we can somehow target that dotted border directly, we wouldn't have to **redefine the text colour** which isn't DRY. – Thany Oct 14 '16 at 15:55
1

this breaks browser styles on disabled options - once the select in focussed they become black instead of the greyed out text they should be. – But those new buttons though.. May 23 '18 at 18:46
To get rid of the inner focus ring (which surrounds the text of the selected option on a focused `select` even when `-moz-appearance: none;` is in effect), see @Wayne Dunkley's answer below (the missing piece is `select::-moz-focus-inner`). – Dave Land Sep 21 '18 at 17:19

score 73 · Accepted Answer · answered Jul 22 '12 at 18:55

I found a solution, but it is mother of all hacks, hopefully it will serve as a starting point for other more robust solutions. The downside (too big in my opinion) is that any browser that doesn't support text-shadow but supports rgba (IE 9) won't render the text unless you use a library such as Modernizr (not tested, just a theory).

Firefox uses the text color to determine the color of the dotted border. So say if you do...

select {
  color: rgba(0,0,0,0);
}

Firefox will render the dotted border transparent. But of course your text will be transparent too! So we must somehow display the text. text-shadow comes to the rescue:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

We put a text shadow with no offset and no blur, so that replaces the text. Of course older browser don't understand anything of this, so we must provide a fallback for the color:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

This is when IE9 comes into play: it supports rgba but not text-shadow, so you will get an apparently empty select box. Get your version of Modernizr with text-shadow detection and do...

.no-textshadow select {
  color: #000;
}

Enjoy.

The only solution that actually works (using FF 20). Congratulations! — Gilberto Torrezan, Apr 12 '13 at 21:51
This should take care of every FF and only FF: `@-moz-document url-prefix() { ::-moz-focus-inner {border: none} select:-moz-focusring { color: transparent; text-shadow: 0px 0px 0px #000; } }` — Timo Kähkönen, Mar 23 '16 at 20:18

score 20 · Answer 3 · edited Oct 01 '14 at 05:09

20

Here is a collaboration of solutions to fix styling issues with Firefox select boxes. Use this CSS selector as part of your usual CSS reset.

Class removes outline as per question but also removes any background image (as I usually use a custom dropdown arrow and Firefoxes system dropdown arrow can't currently be removed). If using background image for anything other than dropdown image, simply remove line background-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

edited Oct 01 '14 at 05:09

joe

8,344
9
54
80

answered Oct 01 '14 at 04:49

Wayne Dunkley

211
2
3

Is there anyway to still define option text color using this method? – user1063287 Jan 29 '16 at 10:39
Actually you can remove Firefox arrows used in the SELECT background, by setting the vendor-specific property `-moz-appearance` to `none`. – yodabar Apr 11 '18 at 09:27
Other answers lack the important `select::-moz-focus-inner` selector, rendering them less effective. That's why this one gets my ⬆. – Dave Land Sep 21 '18 at 17:22
`select:-moz-focusring` along with `color: transparent` and `text-shadow: 0 0 0 #000` removed the annoying border on focus in Firefox v63 – Jason Moore Nov 08 '18 at 14:21
Note: url-prefix(). https://www.fxsitecompat.dev/en-CA/docs/2018/moz-document-support-has-been-dropped-except-for-empty-url-prefix/ Reading the links I do not find it clear if they are going to phase it out or not. But be advised. – user3342816 Aug 25 '19 at 01:42

score 9 · Answer 4 · answered May 01 '14 at 00:12

9

This will target all firefox versions

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

You might want to remove the !important, if you plan to have the outline appear on other pages across your site that use the same stylesheet.

answered May 01 '14 at 00:12

Kyzer

518
5
9

1

This should be the selected answer – brandonscript Jun 11 '20 at 03:46

score 9 · Answer 5 · edited Sep 16 '16 at 10:42

9

In general, form controls are impossible to style to that degree of accuracy. There's no browser I'm aware of that supports a sensible range of properties in all controls. That's the reason why there're a gazillion JavaScript libraries that "fake" form controls with images and other HTML elements and emulate their original functionality with code:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

edited Sep 16 '16 at 10:42

ankitr

5,992
7
47
66

answered Sep 22 '10 at 20:49

Álvaro González

142,137
41
261
360

Thx, I guess I have to "make my own" select list to accomplish this. Too bad that form controls isn't more uniform across browsers. – Martin at Mennt Sep 22 '10 at 21:08
1

@Martin: this is nothing compare to the inflexibility of a file upload control, which cannot be styled *at all* in most browsers. ;) – Arseni Mourzenko Sep 22 '10 at 21:12

score 3 · Answer 6 · edited Aug 18 '12 at 02:03

3

<select onchange="this.blur();">

If you use this the border stays until you select an item from the list.

edited Aug 18 '12 at 02:03

Conner

30,144
8
52
73

answered Nov 09 '10 at 10:17

malitta

47
1

2

Unfortunately, this solution does not respect accessibility and usability guidelines. Besides TTS interfaces for blind users, it disallows keyboard navigation. Focused elements should look different from others, the issue with the current question is that Firefox does not let you decide how. – yodabar Apr 11 '18 at 09:31

score 1 · Answer 7 · answered Jan 04 '14 at 10:27

1

Here comes the solution

:focus {outline:none;}
::-moz-focus-inner {border:0;}

answered Jan 04 '14 at 10:27

Faizan

766
2
7
19

1

Tested. Doesn't work. Firefox recognises this property but it doesn't appear to do anything. Tried setting it to `10px solid red` and I can't find where it shows up. – mpen Aug 22 '17 at 17:12
This actually worked for me when all other higher voted answers didn't. – Tashows Dec 14 '19 at 15:28

score 1 · Answer 8 · answered Sep 22 '10 at 21:01

1

Try one of these:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Reference

answered Sep 22 '10 at 21:01

Catfish

18,876
54
209
353

6

Thx for the effort, but unfortunatly it did not work. Maybe it works on a `a` element, but it did not work on a `select` element. – Martin at Mennt Sep 22 '10 at 21:07

score 1 · Answer 9 · edited Jan 08 '18 at 09:12

1

Remove outline/dotted border from Firefox All Selectable Tags.

Put this line of code in your style sheet:

*:focus{outline:none !important;}

edited Jan 08 '18 at 09:12

Eric Aya

69,473
35
181
253

answered Jan 08 '18 at 08:11

Hasnain Mehmood

407
5
4

score 0 · Answer 10 · answered Oct 30 '20 at 14:32

Step 1) Add HTML: Add the select options of your choice and add the attribute: contenteditable="true"

Step 2) Add CSS: Use the [attribute] selector to select all elements that are contenteditable, and remove the border with the outline property:

[contenteditable] {
  outline: 0px solid transparent;
}
select {
  border: none;
}

<select contenteditable="true">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

score 0 · Answer 11 · answered Dec 24 '20 at 12:47

0

select:focus {
  box-shadow: none;
}

To remove the outline of the select box when selected/focused.

answered Dec 24 '20 at 12:47

Rakesh Yembaram

433
4
7

score 0 · Answer 12 · answered Jun 06 '21 at 16:52

0

https://ssiddique.info/projects/jqueryplugins/demo/index.php?demo=CheckboxStylized check this out Download the plugin from here

answered Jun 06 '21 at 16:52

SS Sid

421
6
12

score -1 · Answer 13 · answered Jun 09 '20 at 11:07

-1

Add border-style: none to your select in CSS.

select {
border-style: none; }

answered Jun 09 '20 at 11:07

Ahad Khwaja

171
2
5

score -2 · Answer 14 · answered Feb 22 '16 at 10:05

-2

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

working 100%

answered Feb 22 '16 at 10:05

user2577904

7

score -4 · Answer 15 · edited Jun 26 '18 at 22:40

-4

This will remove focus from the select element and the outline:

$("select").click(function(){
    $(this).blur();
});

Though this isn't without its shortcomings on other browsers. You'll want to check the browser the user is using:

if (FIREFOX) {
    //implement the code
}

edited Jun 26 '18 at 22:40

Chiramisu

4,687
7
47
77

answered Dec 26 '17 at 14:47

Moses Dike Okore

1
1

Please explain what your code snippet does in addition to providing the code snippet. – sayan Dec 26 '17 at 14:55
`if (FIREFOX) { //implement the code }` BAHAHAHA thanks for a good laugh – Andrew Feb 21 '21 at 00:36

Remove outline from select box in FF

15 Answers15

Linked

Related