Danya Lette

Cross-Browser Custom Dropdown

css

 

I’ve read a number of recommendations for customizing the appearance of dropdowns. This is the closest I’ve come to finding a cross-browser solution:

Note: In the following CSS I’ve prepended the relatively inessential features with *

.select-div{
  *font-family:helvetica;
  height: 32px;
  overflow: hidden;
  background: url("dropdown-arrow.png") no-repeat right #E6E6D1;
  background-size:34px;
  *outline:none;
  *margin-bottom:5px;
  *width:300px;
  *cursor:pointer;
}
.select-div select{
  background: transparent;
  *outline:none;
  width:110%;
  *font-size: 16px;
  *padding:5px;
  *line-height: 1;
  *border: 0;
  *border-radius: 0;
  height: 32px;
  -webkit-appearance: none;
  -moz-appearance:none;
  text-overflow:'';
  text-indent:0.01px;
  *color:#fa814b;
}
.select-div select::-ms-expand {
  display: none;
}