Проблема с фоновым изображением CSS для <select>& <option>

Question

HTML

<select data-val="true"  id="GameID" >
   <option value="">Select Game...</option>
   <option value="4">Counter Strike Source</option>
   <option value="5">Medal Of Honor</option>
   <option value="6">NFS Shift</option>
</select>

CSS

select
{
    color: #fff;
    background: url(/img/backgrounds/tab-hover-background.png) rgba(0,0,0,0); 
    border: 1px solid #8093BE;
    width: 242px;
    height: 20px;   
}

option
{
    background: url(/img/backgrounds/tab-hover-background.png) rgba(0,0,0,0); 
}

• В Firefox работает нормально,
• В Opera это работает только для выбора, но не для опции
• В IE 9.0 и Chrome странное поведение
  Я хочу, чтобы все браузеры отображали как Firefox

это источник

Answer 1

Изменить стиль элемента формы не так-то просто ... у каждого браузера есть свой собственный способ рендеринга и создания этих элементов . Некоторые браузеры допускают наличие фонового изображения внутри вашего выбора, другие нет.

Простой способ - добавить цвет по умолчанию, чтобы браузер отображал этот цвет, если не может отобразить изображение.

background: #c3c3c3 url(http://www.3dtuning.ru/img/design/gallery-back.png) repeat-x 0 0;

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

Надеюсь, это поможет

Answer 2

Как и в предыдущем посте: цвет предшествует URL-адресу изображения. вместо rgba (0,0,0,0) лучше использовать слово «прозрачный», так как это было бы лучше совместимо.

Answer 3

Ваша альфа-прозрачность установлена ​​в 0 в значениях RGBa, это означает, что она будет полностью прозрачной / невидимой, для ее видимости необходимо установить значение 1.

Кроме того, вам нужно поставить RGBa значение перед url('image.jpg').