optioncss样式的简单介绍

如何修改select的子元素option的默认样式

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背景图片如下：

如何修改select的option样式

css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码: .div1{ width:600px; height:200px; font-size:13px; } .div select{ width:200px; } .div sel

纯css怎么修改option内的样式

方法：在 select标签里面加上 color=#任意16进制数字可以改字体颜色，加上background color可以改背景颜色。

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