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

#css

Как закрасить кнопку select в нужный цвет. Белая стрелка на сером фоне. С border понятно
    

Ответы

Ответ 1

Быстрый ответ



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;
  }
}

    5 кг
    10 кг
    20 кг
    30 кг





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

Описание решений

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

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

Решение #1 - appearance: none

Демо

Суть решения заключается в том, чтобы спрятать стрелочку с помощью 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-, тогда:

Решение 2 - Обрезать элемент select, чтобы спрятать стрелочку

Демо

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

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



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

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

Решение 3 - pointer-events

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

Демо

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

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

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

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