How to remove the arrow image from select element in FireFox and Internet Explorer

JSFiddle: http://jsfiddle.net/jnelsonin/NMq75/

This is how the select element looks in FireFox and Internet Explorer 10, after giving a background image.

select element in FireFox
select element in FireFox
select element in Internet Explorer 10
select element in Internet Explorer 10

How to get rid of the browser default arrow image?

HTML

<div class="ui-select">
    <select>
        <option>Mozilla Firefox</option>
        <option>Google Chrome</option>
        <option>Apple Safari</option>
        <option>Internet Explorer</option>
    </select>
</div>

CSS

.ui-select{width: 100%}
/* For Microsoft IE */
select::-ms-expand {	display: none; }

/* For Webkit based browsers Firefox version 29 and less, Google Chrome, Apple Safari */
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* For Firefox version 30 and above */
@-moz-document url-prefix(){
      .ui-select{
          border: 1px solid #CCC; 
          border-radius: 4px; 
          box-sizing: border-box; 
          position: relative; 
          overflow: hidden;
     }
     .ui-select select{
          width: 110%; 
          background-position: right 30px center; 
          border: none;
     }
}

Leave a Reply

Your email address will not be published. Required fields are marked *