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

发布时间:2024年01月10日

问题

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

在这里插入图片描述

原因

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

结论

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

👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
请添加图片描述

文章来源:https://blog.csdn.net/jiangjunyuan168/article/details/135504016
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。