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.


For :


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.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s