< select>的CSS背景图片问题& < option> [英] CSS background-image issue for <select> & <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>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！