select option有浏览器默认样式,且对自己的样式有一定的保护(基于css规则)。
这个保护就是appearance属性,浏览器内置的css样式是不允许更改的,日常开发仅是在它的样式基础上覆盖而已。
然而当设置 appearance: none 的时候,就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个div,开发者就可以灵活设置样式了。(细节参考MDN:网页链接)
而option还是略有不同,css规则暂时还未暴露更多的权限给开发者。 实践中option也就可以改改文字大小、文字颜色、背景色等,要不你试试网页链接。