css中appearance:none修改select option样式

2019-05-155704次阅读css

select option有浏览器默认样式,且对自己的样式有一定的保护(基于css规则)。

这个保护就是appearance属性,浏览器内置的css样式是不允许更改的,日常开发仅是在它的样式基础上覆盖而已。

然而当设置 appearance: none 的时候,就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个div,开发者就可以灵活设置样式了。(细节参考MDN:网页链接

而option还是略有不同,css规则暂时还未暴露更多的权限给开发者。 实践中option也就可以改改文字大小、文字颜色、背景色等,要不你试试网页链接

上一篇: Element.closest()简化事件处理程序中匹配最近的父元素  下一篇: 拥抱Flexbox弹性布局基本概念之Flex项目  

css中appearance:none修改select option样式相关文章