怎么修改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、此时,我们将背景颜色添加到选择下拉框中。如下面的效果图。
也遇到过,然后各种搜索。
之所以开发者很不容易自己修改,是因为 select option 有浏览器默认样式,且对自己的样式有一定的保护(基于css规则)。
这个保护就是 appearance 属性,浏览清模器内置的css样式是握森不允许更改的,日常开发仅是在它的样式基础上覆盖而已。
然而当设置 appearance: none 的时候,就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个段正亩div,开发者就可以灵活设置样式了。(细节参考MDN:网页链接)
而option还是略有不同,css规则暂时还未暴露更多的权限给开发者。
是看一位热心网友回答才得知的, 暂只留下了他提供的代码:网页链接