<select> 和 <option> 的 CSS 背景图像问题

Question

超文本标记语言

<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 用户将看到背景图像（在我看来，它总是看起来很难看），而其余浏览器将以灰色背景显示。

希望这可以帮助