怎么修改select option样式

html-css016

怎么修改select option样式,第1张

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、此时，我们将背景颜色添加到选择下拉框中。如下面的效果图。

<span class=".mygreen">bbb</span>你这句话中mygreen前多了个点 <span class="mygreen">bbb</span>

<div class="selectbox">

      <select>

            <option>默认值</option>

            <option>选项之</option>

      </select>

</div>

css代码：

.selectbox{ width: 200px display: inline-block overflow-x: hidden height: 28px line-height: 28px font-size: 0  background:#fff url(images/selectbg.png) right center no-repeat border: 1px solid #dcdbdb vertical-align: middle}

.selectbox select{cursor: pointer padding: 0 8px height: 28px line-height: 28px font-size: 12px width:118% padding-right: 18% background:none border: none}

.selectbox select option{ padding:5px}

1..selectbox select  有个padding-right:18%； 和宽度100%+18% 的意思是故意超出selectbox的。

2.这个超出部分刚好能把后面的默认下拉按键隐藏掉，同时设置.selectbox的背景为下拉小按钮，居右边垂直居中。

3.之所以用百分比(18%)，没有用固定值设置超出，是因为外层的selectbox只要定宽就不必考虑内层的select的宽度和padding样式值，很利于设置不同的宽度值，这里只需要设置selectbox的宽度，内层的select控件就自动获得宽度并超出。

最终效果如下：

selectbg.png背景图片如下：