怎么修改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、此时，我们将背景颜色添加到选择下拉框中。如下面的效果图。
1、首先我们打开html开发工具，新建一个html代码页面。
2、在html代码页面上创建一个select下拉菜单。
3、保存html代码页面，使用浏览器打开，这个时候我们发现select下拉菜单是可以点击修改的。
4、回到html代码页面，在select标签上添加disabled="disabled"属性。
5、保存html代码页面，回到浏览器页面上刷新页面，这个时候会发现select下拉菜单已经变为不可编辑修改了。
6、可以直接复制所有代码，粘贴到新建html页面保存后打开即可看到效果。
也遇到过，然后各种搜索。
之所以开发者很不容易自己修改，是因为 select option 有浏览器默认样式，且对自己的样式有一定的保护（基于css规则）。
这个保护就是 appearance 属性，浏览器内置的css样式是不允许更改的，日常开发仅是在它的样式基础上覆盖而已。
然而当设置 appearance: none 的时候，就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个div，开发者就可以灵活设置样式了。（细节参考MDN：网页链接）
而option还是略有不同，css规则暂时还未暴露更多的权限给开发者。
是看一位热心网友回答才得知的， 暂只留下了他提供的代码：网页链接
