как закрасить кнопку select в нужный цвет

select { 
  border: 2px solid #5B5B5B; 
  background: transparent; 
  width: 125px; 
  padding: 5px 35px 5px 5px; 
  font-size: 16px; 
  height: 28px; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none; 
  background: no-repeat right url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAZCAMAAAAVHr4VAAAASFBMVEVbW1v+/v7Y2NiDg4P7+/vj4+PV1dV0dHRiYmJeXl729vby8vLr6+vPz8/CwsK8vLytra2pqamYmJiVlZWHh4d2dnZpaWloaGivQPliAAAAVklEQVQoz93PSQ6AIBBE0WIScJ69/03VdCQGGvfyt29ThQJT8pWKtRIh42O0OuCKpPGxDmnekOmN3UQ4gK2/rd55PJoLJ2SahWgdK3R2QTYr8ZHDbzsBMLkBiiUpVMwAAAAASUVORK5CYII=') 
} 
 
 
/* CAUTION: IE hackery ahead */ 
 
select::-ms-expand { 
  display: none; 
  /* remove default arrow on ie10 and ie11 */ 
} 
 
 
/* target Internet Explorer 9 to undo the custom arrow */ 
 
@media screen and (min-width:0\0) { 
  select { 
    background: none\9; 
    padding: 5px\9; 
  } 
}

<select> 
    <option>5 кг</option> 
    <option selected>10 кг</option> 
    <option>20 кг</option> 
    <option>30 кг</option> 
</select>

Здесь использовалось решение #1, описанное ниже

На stackoverflow.com пользователем Danield предложено 3 решения для стилизации select.

Я позволил себе сделать вольный перевод данного ответа, сохранив все ссылки на статьи и примеры из оригинального ответа.

Демо

Суть решения заключается в том, чтобы спрятать стрелочку с помощью appearance: none и добавить произвольное изображение.

select {
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* удаляем стандартную стрелочку */
   background-image: url(...);   /* добовляем произвольное изображение */
}

appearance: none имеет хорошую поддержку браузерами, однако не поддерживается IE11- и Firefox 34-

Мы можем добавить поддержку IE10 и IE11 добавив

select::-ms-expand { 
    display: none; /* скрывает стрелку в IE10 и IE11 */
}

К сожалению, мы не сможем скрыть стрелку в IE9, мы лишь можем убрать нашу собственную и оставить стандартную

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    } 
}

Если нужна поддержка IE9- и Firefox 34-, тогда:

Демо

Суть решения заключается в том, чтобы обернуть select элементом div, который имеет фиксированную ширину и overflow:hidden. Элементу select установить ширину на примерно 20px больше чем ширина div. В результате стандартная стрелка будет не видна, будет обрезана элементом div, и мы можем использовать любое фоновое изображение в правой части div.

Преимущество этого решения в широкой поддержке браузерами (IE8+, браузеры на WebKit и Gecko). Однако, есть и недостаток, выпадающий список с option выступает относительно правого края select на те самые 20px.

Подробнее о способе можно прочитать тут

Если стандартная стрелочка необхоима на Firefox 34-, но вам не нужна поддержка старых IE, тогда:

Идея заключается в том, чтобы перекрыть стандартную стрелку select элементом с pointer-events:none.

Демо

Преимущество: хорошо выглядит и работает на WebKit и Gecko. Недостаток: вы не можите добавить :hover или cursor:pointer своей стрелочке, так как мы отключили события курсора. Еще один недостаток, Internet Explorer 10 и ниже не поддерживает pointer-events, это означает, что клик по элементу со своей стрелочкой не приведет к открытию списка.

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

Учтите, что IE10 больше не поддерживает условные комментарии. Однако, есть еще один способ отключить pointer-events для IE10 с помощью CSS hack.

Подробнее о способе можно прочитать тут