How to remove the default arrow icon from a dropdown list (select element)?

Question

I want to remove the dropdown arrow from a HTML <select> element. For example:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

How to do it in Opera, Firefox and Internet Explorer?

enter image description here

Some answers/hacks for hiding it in Firefox - http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox — andyb, May 17 '13 at 07:46
[**appearance**](https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance) `#slectType { -webkit-appearance: none; appearance: none /*menulist*/ `[**!important**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)`; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;}` Browses[ CH:-webkit, FF:-moz, IE:-ms, Oprea:-o]; — Yash, May 23 '16 at 13:14
Possible duplicate of [Remove Select arrow on IE](http://stackoverflow.com/questions/20163079/remove-select-arrow-on-ie) — Muath, Apr 04 '17 at 10:14
Possible duplicate of [HTML hide Select drop down arrow with css](https://stackoverflow.com/questions/27435192/html-hide-select-drop-down-arrow-with-css) — Damjan Pavlica, Oct 15 '17 at 18:45
For those who use Tailwind, add this class: `appearance-none` — TechWisdom, Aug 07 '22 at 17:30

score 424 · Answer 1 · edited Oct 22 '18 at 10:21

424

There's no need for hacks or overflow. There's a pseudo-element for the dropdown arrow on IE:

select::-ms-expand {
    display: none;
}

edited Oct 22 '18 at 10:21

Krisztián Balla

19,223
13
68
84

answered Sep 18 '13 at 17:24

nrutas

4,983
2
16
16

23

because the question was how to remove the dropdown arrow in IE. IE9 doesn't have this functionality, but this works in IE10. so unless you're using windows XP, you should be using IE10 anyway. IE11 is almost out. other option is an ugly CSS hack to hide the actual dropdown button and make your own. – nrutas Oct 29 '13 at 22:22
2

[link](http://stackoverflow.com/a/19224129/2009533) here's the ugly hack to hide the overflow – nrutas Oct 29 '13 at 22:23
1

Works in IE11. Gracias! – ConorLuddy Mar 08 '17 at 17:30
2

This did not work in Firefox. Use Varun Rathore's solution below for Firefox. – Brad Ahrens Mar 13 '17 at 10:59
2

this is for IE only. of course it won't work in Firefox. – nrutas Mar 27 '17 at 11:46
great, exactly what I was looking for. I had custom arrow image added and hide the default, which was working for other browsers but Edge was showing 2. Now its fixed. – K. Shaikh Jul 28 '20 at 15:10
Not quite sure why this has green tick. It doesn't answer the question. – Midiman Mar 23 '21 at 11:55

score 389 · Answer 2 · edited Oct 24 '21 at 20:52

389

The previously mentioned solutions work well with chrome but not on Firefox.

I found a Solution that works well both in Chrome and Firefox(not on IE). Add the following attributes to the CSS for your SELECTelement and adjust the margin-top to suit your needs.

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>

</select>

edited Oct 24 '21 at 20:52

Lee Taylor

7,761
16
33
49

answered Dec 09 '13 at 06:55

Varun Rathore

7,730
3
27
30

10

This trick stopped working on Firefox as of version 31 (in Nightly build as of May 2014). Let's see what can be done in the meanwhile. This gist I wrote has the full lowdown: https://gist.github.com/joaocunha/6273016/ – João Cunha May 14 '14 at 10:40
Joäo Cunha's method checked and used succesfully. When you check it out, don't forget to open the link in firefox! – NoobishPro May 15 '14 at 09:19
It worked for me. I wanted to use it for wkhtmltopdf to generate pdf from html. Thanks – Faisal Aug 10 '16 at 15:18
text-indent only affects the active option, whereas padding-left affects both the selected option and the options in the drop-down, which looks cleaner IMO. I don't see the need for the text-overflow, if you simply want to remove the arrow. – Stephen Miller Jun 04 '21 at 21:08

score 251 · Answer 3 · edited May 05 '18 at 16:03

251

Simple way to remove drop down arrow from select

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

edited May 05 '18 at 16:03

Vadim Ovchinnikov

13,327
5
62
90

answered Sep 17 '15 at 06:13

Sangeet Shah

3,079
2
22
25

19

I just used `appearance: none` for Chrome and Firefox Quantum (v59 and up). I.e. **no need [vendor prefixes** anymore](https://caniuse.com/#search=appearance). – CPHPython May 17 '18 at 10:31
3

@CPHPython Most browsers as of this comment still have a "partial support with prefix" tag on them... – Dan Sep 24 '18 at 12:23
4

@CPHPython you need to have [Autoprefixer](https://github.com/postcss/autoprefixer) installed on your project for the unprefixed `appearance: none` to work. Most browsers still need the prefixes. – Daniel Tonon Nov 11 '18 at 23:40
@DanielTonon oh, perhaps I was using some postcss package like that. I do not remember exactly, but I think I checked the browser's inspector before commenting. – CPHPython Nov 13 '18 at 09:35
This hsould be the accepted answer, as it actually answers the question :-) – Midiman Mar 23 '21 at 11:57

EpokK · Answer 4 · 2013-05-17T07:52:57.867

70

Try this :

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin : http://jsbin.com/aniyu4/2/edit

If you use Internet Explorer :

select {
    overflow:hidden;
    width: 120%;
}

Or you can use Choosen : http://harvesthq.github.io/chosen/

edited May 17 '13 at 07:52

answered May 17 '13 at 07:47

EpokK

38,062
9
61
69

1

Did you test [your JSBin](http://jsbin.com/aniyu4/2/edit) in IE and firefox? I still see the built in dropdown arrow in both. – Martin Smith May 17 '13 at 07:49
Check with Choosen, I think it's the best choice. – EpokK May 21 '13 at 14:13
"If you use Internet Explorer"? You need to consider the large % of the population who DO use IE and cater for them regardless – Danny Mahoney Jun 09 '16 at 01:10
Our sites user stats are as follows: 5.21% IE or 2.37% Edge – nu everest May 10 '17 at 19:18
1

"If you use IE" would be correct, it'd be better suited to say "If you need to support IE" but in this day and age, your technology should be properly targeted towards your audience, if you're running a web developer targeted website then I doubt you'll be needing to support ANY versions of IE. – brandito Apr 11 '18 at 05:36

score 17 · Answer 5 · edited Oct 07 '13 at 12:12

17

Try This:

HTML:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

edited Oct 07 '13 at 12:12

Marc Audet

46,011
11
63
83

answered Oct 07 '13 at 11:49

Luke Kalyan Brata Sarker

481
5
6

score 15 · Answer 6 · edited Nov 25 '15 at 15:44

Try this it works for me,

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

You can not hide but using overflow hidden you can actually make it disappear.

score 10 · Answer 7 · answered Dec 08 '21 at 09:45

10

In my case (on latest Mozilla version 94.0.2),

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

doesnt work but after checking the css I found the solution :

Arrow is contain in background-image so I solved it by just adding background-image: none;

I recommend use all rules

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
}

answered Dec 08 '21 at 09:45

Adrien Villalonga

417
3
15

1

This is the solution - works if a select has the "multiple" attribute applied too. – James Stewart Jun 25 '22 at 16:49

score 7 · Answer 8 · answered Mar 28 '14 at 20:23

Just wanted to complete the thread. To be very clear this does not works in IE9, however we can do it by little css trick.

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

score 6 · Accepted Answer · answered Dec 11 '21 at 16:23

6

If you use TailwindCSS You may take advantage of the appearance-none class.

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

answered Dec 11 '21 at 16:23

Félix Paradis

5,165
6
40
49

Anyone know how to get this to work for selects using the "multiple" attribute? – James Stewart Jun 25 '22 at 16:49

score 5 · Answer 10 · edited May 23 '17 at 12:26

5

As I answered in Remove Select arrow on IE

In case you want to use the class and pseudo-class:

.simple-control is your css class

:disabled is pseudo class

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

edited May 23 '17 at 12:26

Community

1
1

answered Apr 06 '17 at 14:59

Tejasvi Hegde

2,694
28
20

score 4 · Answer 11 · answered Apr 02 '15 at 06:28

4

select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

answered Apr 02 '15 at 06:28

Mitul

3,431
2
22
35

score 2 · Answer 12 · answered May 17 '13 at 07:48

You cannot do this with a fully functional cross browser support.

Try taking a div of 50 pixels suppose and float a desired drop-down icon of your choice at the right of this

Now within that div, add the select tag with a width of 55 pixels maybe (something more than the container's width)

I think you'll get what you want.

In case you do not want any drop icon at the right, just do all the steps except for floating the image at the right. Set outline:0 on focus for the select tag. that's it

I cannot get no help from these hints. Can anybody give adequate code here? Thank you. — user2301515, May 17 '13 at 09:17

nrutas · Answer 13 · 2015-03-21T14:18:08.140

2

there's a library called DropKick.js that replaces the normal select dropdowns with HTML/CSS so you can fully style and control them with javascript. http://dropkickjs.com/

edited Mar 21 '15 at 14:18

answered Oct 29 '14 at 00:02

nrutas

4,983
2
16
16

score 2 · Answer 14 · edited Apr 16 '16 at 01:51

Works for all browsers and all versions:

JS

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>

Musaib Mushtaq · Answer 15 · 2022-08-21T17:43:07.010

one simple and easy way to hide the caret icon on select html tag is to add the background-image to it in css with value as none along with appearance none;

select.without-icon {appearance:none;background-image:url('');}

<label>with Icon</label>
<select class="with-icon">
<option value="select" selected>Select</option>
<option value="Html Css">HTML CSS </option>
<option value="web development">Web Development</option>
<option value="Front End">Front End</option>
<option value="Programming">Programming</option>
</select>

<label>Without Icon</label>
<select class="without-icon">
<option value="select" selected>Select</option>
<option value="Html Css">HTML CSS </option>
<option value="web development">Web Development</option>
<option value="Front End">Front End</option>
<option value="Programming">Programming</option>
</select>

, just like this:

background-image:url('');

How to remove the default arrow icon from a dropdown list (select element)?

15 Answers15

Linked