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);
border: 1px solid #8093BE;
width: 242px;
height: 20px;
}
option
{
background: url(/img/backgrounds/tab-hover-background.png) rgba(0,0);
}
>在Firefox中它工作正常,
>在Opera中,它仅适用于select,但不适用于选项
>在IE 9.0& Chrome有一种奇怪的行为
我希望所有浏览器都像Firefox一样显示
this是一个来源
解决方法
它不是那么容易改变形式元素的风格..每个浏览器都有它的
own way to render and create those elements.有些浏览器会接受在你的选择中有一个背景图像,其他浏览器不会.
一种简单的技术是添加默认颜色,因此如果浏览器无法渲染图像,浏览器将呈现颜色.
background: #c3c3c3 url(http://www.3dtuning.ru/img/design/gallery-back.png) repeat-x 0 0;
所以这样,firefox用户会看到一个背景图片(在我看来总是看起来很难看),其余的浏览器会以灰色背景显示.
希望这可以帮助
