怎么修改select option样式

1、首先看一下没有（background-color）属性的选择下拉框的效果。

代码：

<选择>

<option>123 </ option>

<option>blue </ option>

<option>黄色</ option>

<option>红包</ option>

</选择>

2、要在选择下拉框中添加背景颜色，首先我们需要先编写样式样式，这样便于调用。

样式类样式代码：

<style type =“text / css”>

蓝色 {

背景色：蓝色

颜色：#FFF

red {

背景色：＃E20A0A

颜色：#FFF

}

黄色 {

背景颜色：黄色

颜色：#fff

}

</样式>

3、此时，我们的选择下拉框调用样式类样式。

代码如下：

<选择>

<option>123 </ option>

<option class =“blue”>蓝色</ option>

<option class =“yellow”>黄色</ option>

<option class =“red”>红包</ option>

</选择>

4、此时，我们将背景颜色添加到选择下拉框中。如下面的效果图。

在IE中CSS能控制select高宽,在火狐中可以控制的比较多

直接在select上加class就可以设置CSS了

例:

<style type="text/css">

.selectYs{ width:300pxbackground:#F00}

</style>

<form action="#">

<select class="selectYs">

<option value="">1111

<option value="">1111

<option value="">1111

<option value="">1111

</select>

</form>

有的属性浏览器不兼容,但大部分还是可以的你自己试试就知道了

1、css没有办法实现美化select下拉框的。不管怎么设定都没有用的

2、可以通过div+css+jq自己模拟一款css

<div class="select">

<div class="select_default"></div> <!--这边是默认展示我们选中的框-->

<ul class="select_item"> <!--实则所有的下拉选项隐藏了，在这个ul中-->

<li>Complex</li>

<li>Knowledge</li>

<li>Case</li>

<li>Article</li>

<li>News</li>

</ul>

</div>

然后结合jq语法，实现点击出现下拉，点击下拉吧文本赋值到div里头

3、网络搜索下拉框美化插件。

---