Question

css如何设置select的背景图

Answer 1

一。使用JS+CSS，利用CSS设置属性，通过onchange触发事件，或者JS对标签的控制，完成对<select>的美化，也能够达到兼容的目的。
二。使用Jquery，这个方法能够实现很多炫目的select特效，但是封装过程和调用过程不是很容易理解，另外，如果遇到联级select的调用方式，很容易出错。
三。仍是利用Jquery+CSS的方式，通过使用其他div标签仿<Select>来实现。

JQ的话，在站酷上可以搜索到，很漂亮的效果。。。

Answer 2

select{background:red;}

Answer 3

1. 使用一个<span>来控制背景图片，使用一个<div>标签作为遮罩层，再使用一个<div>来设置select属性
2. 通过这三个层不同的属性设置，也借用z-index属性，使三层叠加起来，<span>作为最底层，一个<div>作为遮罩层将select真实样式遮盖，便可以完成<select>标签的背景更改。
3. 这段CSS代码只是控制select的背景，与<option>属性设置没有关系
span{
width:200px;
height: 30px;
line-height:30px;
vertical-align:middle;
display:block;
background:transparent url(Images/background.gif) no-repeat;
position:relative;
margin:0px;
padding-top:6px;
padding-left:2px;
z-index:1;
}
.SelectDiv1{
width: 160px;
height:15px;
line-height:15px;
vertical-align:middle;
background: transparent;
position: relative;
overflow: hidden;
border-width:0px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
-webkit-appearance: none;
z-index:2;
}
.SelectDiv2{
top: -2px;
left:-2px;
width:180px;
height:20px;
border-width: 0px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
display:block;
position: relative;
overflow:hidden;
z-index:3;
}
<span><div class="SelectDiv1"><select name="select" id="select" class=“SelectDiv2”> <option>选项列表</option></select></div></span>
这样，便可实现兼容个浏览器的，纯CSS控制的，设置<Select>背景图片样式。