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?

Solution 1

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

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

Solution 2

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>

Solution 3

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>

Solution 4

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/

Solution 5

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;
}

Solution 6

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.

Solution 7

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;
}

Solution 8

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;
}

Solution 9

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;
} 

Solution 10

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;

}

Solution 11

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>

Solution 12

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

Solution 13

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/

Solution 14

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>

Solution 15

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('');