Select tag appearance browser to browser

Question

These are the screenshots of how my select tag appear in IE and Firefox:

How to make it appear same in every browser?

The css code is:

select{
    width:10%;
    margin:0;
    padding:0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 0px 4px 4px 0px;
    font-size: 16px;
    background-color: white;
    padding: 13px 0px 14px 10px;
    background-color: lightblue;
    color:#333;
    margin-left: -7px;
}

UPDATE : This new customized select dropdown workded fine in mozilla and chrome select#city { -webkit-appearance: none; /REMOVES DEFAULT CHROME & SAFARI STYLE/ -moz-appearance: none; /REMOVES DEFAULT FIREFOX STYLE/

    color: #fff;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 0px 4px 4px 0px;
    -webkit-border-radius: 0px 4px 4px 0px;
    font-size: 13px;
    /* padding For Mozilla*/ 
    padding: 15px 0px 14px 2px;
    /* padding for chrome */
    -webkit-padding-before:15px;
    -webkit-padding-end:0px;
    -webkit-padding-after:13px !important;
    -webkit-padding-start:5px;
    width: 10%;
    cursor: pointer;
    margin-left: -7px !important;
    background: #0d98e8 url(https://cdn1.iconfinder.com/data/icons/universal-icons-set-for-web-and-mobile/100/controls_0-12-512.png) no-repeat right center;
    background-size: 40px 37px; /*TO ACCOUNT FOR @2X IMAGE FOR RETINA */
    box-sizing: border-box;
}

select#city  option {
    background-color:#fff;
    color:black;
}
select::-ms-expand{
    display:none;
}

Every browser handles input controls in its own way. You can still try making it consistent. — Rehban Khatri

Rehban Khatri Rehban Khatri · Accepted Answer · 2016-12-06T09:35:54

As I said, there is no straight way of doing this and I will not recommend this. After getting a little help from here, this is the only way I could figure out to make it look consistent across all browsers.

So what I did,

1) I removed all existing styles

select::-ms-expand{
   display:none;  //FOR IE
}
select.custom-dropdown {
  -webkit-appearance: none;  /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
  -moz-appearance: none;  /*REMOVES DEFAULT FIREFOX STYLE*/
  border: 0 !important;  /*REMOVES BORDER*/
}

2) Applied custom styles to select

color: #fff;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 font-size: 14px;
 padding: 10px;
 width: 35%;
 cursor: pointer;

 background: #0d98e8 url(https://cdn1.iconfinder.com/data/icons/universal-icons-set-for-web-and-mobile/100/controls_0-12-512.png) no-repeat right center;
 background-size: 40px 37px; /*TO ACCOUNT FOR @2X IMAGE FOR RETINA */

3) Applied new styles on option

select.custom-dropdown option {
  background-color:#fff;
  color:black;
}

Here's the fiddle of my attempt.

See if this is what you want.

Select tag appearance browser to browser

2 Answers