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用户会看到一个背景图片(在我看来总是看起来很难看),其余的浏览器会以灰色背景显示.
希望这可以帮助
