How to Remove Select arrow on IE and Other Browser(Chrome/Safari/FF) by using CSS?

I used the following CSS3 to hide the select box default behavior – drop down arrow

For : safari, chrome and Fire Fox.

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


For :
IE10

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

For : IE9

We cannot remove the arrow in pure CSS for IE9 < , but we tried the below tricks to disappear the select box drop down arrow

In this example, you set a fixed width on select, and wrap a div with a lower width and overflow:hidden in order to mask/hide the drop down.

div {
    width: 80px;
    overflow: hidden;
    border: 1px solid black;
}
select {
    width: 100px;
    border: 0px;
}

Note: This  will hide the arrow in all the browser not only for IE.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s