< select>的CSS背景图片问题& < option>

问题描述：

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中它仅适用于select，但不适用于选项

在IE 9.0& Chrome有一个奇怪的行为

我想让所有浏览器显示为Firefox

In Firefox it works fine,
In Opera it works only for select,but not for option
In IE 9.0 & Chrome it has a strange behavior
I want all browsers to display like Firefox

这是来源

答

它不是那么容易改变form元素的风格..每个浏览器都有它的自己的方式以呈现和创建这些元素。某些浏览器会接受在选择中包含背景图片，其他则不会。

Its not that easy to change form element's style.. each browser has it's own way to render and create those elements. Some browsers will accept having a background image inside your select, others won't.

一个简单的技巧是添加默认颜色，因此浏览器会渲染颜色if它不能呈现图像。

A simple technique is to add a default color, so the browser will render the color if it cant render the image.

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

这样，firefox用户会看到一个背景图片（总是看起来很丑陋），其余浏览器将以灰色背景显示。

so this way, firefox users will see a background image (something that always looks ugly, in my opinion) and the rest of the browsers will display with a gray background.

希望这有助于

< select>的CSS背景图片问题& < option>

相关推荐