css 原生 select ＞ option 样式无法修改问题

问题

作者在维护老项目的过程中遇到一个修改原生 select 样式的需求，本以为只是一个简单的样式修改，但尝试过后，发现 select 下的 option 除了颜色样式可以修改，其他的样式怎么也修改不了。

原因

经过搜索后才得知，出现这个问题的原因是 select > option 有浏览器默认样式，且对自己的样式有一定的保护（基于css规则）。这个保护就是 appearance 属性，浏览器内置的 css 样式是不允许更改的，日常开发仅是在它的样式基础上覆盖而已。然而当设置 appearance: none 的时候，就相当于让select 元素脱离浏览器内置 select 样式了。此时它相当于一个 div，开发者就可以灵活设置样式了（更多细节参考：MDN ）。而 option 还是略有不同，css规则暂时还未暴露更多的权限给开发者。

结论

所以 select 可以通过设置 appearance: none 后修改其样式，而 option 的样式除了简单的颜色样式修改外，其余的样式是不能修改的。
假如实在 battle 不过项目经理，就只能使用第三方组件或者自己手写了😂

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者