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

<script>

function AddOption() {

var varOption = document.createElement("OPTION")

//设置背景颜色

varOption.style.background = "Red"

varOption.text = "1"

select1.appendChild(varOption)

}

</script>

<select id="select1">

</select>

<button onclick="AddOption()">

</button>

---