Кроссбраузерная стилизация select на CSS

В данной статье приведен пример стилизации select'а на чистом CSS для Chrome, Safari, Firefox и IE9+ без добавления дополнительных элементов.

CSS

  
select {
  width              : 100px;
 height             : 26px;
  border-radius      : 10px;
  -webkit-appearance : none;
  background-image   : url('select-arrow.png');
 background-position: right center;
  background-repeat  : no-repeat;
 line-height        : 1em;
 /* for FF */
  -moz-appearance    : none;
  text-indent        : 0.01px; 
 text-overflow      : '';
  /* for IE */
  -ms-appearance     : none;
  appearance         : none !important;
}
 
select::-ms-expand {
 display: none;
}
 

Здесь первая часть кода отвечает за базовую стилизацию элемента. Можно также добавить цвет фона background-color и цвет border'а.

 
  width        : 100px;
 height       : 26px;
  border-radius: 10px;
  

Далее отменяем стандартное отображение select'а

 
  /*for WebKit*/
  -webkit-appearance: none;
 /* for FF */
  -moz-appearance   : none;
 text-indent       : 0.01px; 
  text-overflow     : '';
 /* for IE */
  -ms-appearance    : none;
 appearance        : none !important;
  

Теперь задаем вид стрелочки, которая присутствует в каждом select'е:

  
  background-image   : url('select-arrow.png');
 background-position: right center;
  background-repeat  : no-repeat;
 

Мы специально задаем фон отдельными свойствами, чтобы можно было добавить фоновый цвет и не бояться, что он перекроет картинку.

И осталось маленькое дополнение для IE:

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