Фоновое изображение для выбора (выпадающее меню) не работает в Chrome

Я хочу использовать изображение на фоне выделения/выпадающего списка. Следующий CSS отлично работает в Firefox и IE, но не в Chrome:

#main .drop-down-loc { width:506px; height: 30px; border: none; 
  background-color: Transparent; 
  background: url(images/text-field.gif) no-repeat 0 0; 
  padding:4px; line-height: 21px;}

Ответы

Ответ 1

select 
{
    -webkit-appearance: none;
}

Если вам нужно, вы также можете добавить изображение, содержащее стрелку, как часть фона.

Ответ 2

Что сказал Арне - вы не можете надежно стилизовать прямоугольники выбора и заставить их выглядеть примерно так же, как в браузерах.

Uniform: https://github.com/pixelmatrix/uniform - это javascript-решение, которое дает вам хороший графический контроль над вашими элементами формы - это все еще Javascript, но это о так же хорошо, как javascript для решения этой проблемы.

Ответ 3

Как правило, он считал неправильной практикой стиль стандартных элементов управления форматом, потому что вывод выглядит так по-разному в каждом браузере. См. http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ для некоторых визуализированных примеров.

При этом мне повезло, что цвет фона имеет значение RGBA:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #d00;
      }
      select {
        background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0; 
        padding:4px; 
        line-height: 21px;
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Foo</option>
      <option>Bar</option>      
      <option>Something longer</option>     
  </body>
</html>

Google Chrome по-прежнему отображает градиент поверх фонового изображения в цвете, который вы передаете rgba (r, g, b, 0.1), но выбираете цвет, который дополняет ваше изображение, а альфа-0,1 уменьшает эффект этого.

Ответ 4

вы можете использовать приведенные ниже стили CSS для всех браузеров, кроме Firefox 30

select {
  background: url(dropdown_arw.png) no-repeat right center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 90px;
  text-indent: 0.01px;
  text-overflow: "";
}

демо-страница - http://kvijayanand.in/jquery-plugin/test.html

Обновление

вот решение для Firefox 30. Маленький трюк для пользовательских элементов выбора в firefox: -moz-any() css псевдокласс.

http://blog.kvijayanand.in/customize-select-arrow-css/