Change the Select Box List with CSS

Change the Default Select Box List with CSS in all browser. Select Drop Down style for Firefox,Google Chrome, Safari and other Browser.

Well the reality is that you shouldn’t complain to the designer because little things like this makes you push yourself a little bit harder and not rely on default stylings just because.

put this code in style sheet.

.dropdown {
border: 0;
-webkit-appearance: none;            /*Removes default chrome and safari style*/
-moz-appearance: none;             /* Removes Default Firefox style*/
background: url('dropdown_style.png') no-repeat;          /*Adds background-image*/
background-position: 82px 7px;           /*Position of the background-image*/
width: 100px;            /    *Width of select dropdown to give space for arrow image*/
text-indent: 0.01px;          /* Removes default arrow from firefox*/
text-overflow: "";               /*Removes default arrow from firefox*/

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