How to remove the default arrow icon from a dropdo

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?

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

Answer 2

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>

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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>