为何macOS下浏览器无法对HTML option元素设置样式？

macOS上的Chrome、Firefox、Safari等浏览器，在渲染<select>和<option>元素时，依赖系统原生的下拉菜单控件，而非完全由浏览器自主实现渲染逻辑。这是为了和macOS系统的UI风格保持一致性，让网页控件和系统原生控件的视觉体验统一。

而Windows系统的浏览器会更多地采用自定义渲染的下拉控件，因此支持更多CSS样式对<option>的修改。但macOS的原生下拉控件（基于Cocoa框架的NSPopUpButton等组件）的样式受系统主题和控件本身的限制，很多CSS属性无法覆盖原生样式，其中就包括你代码中尝试设置的<option>的color属性：

你的代码示例：

<select>
  <option class="option">Value 1</option>
  <option class="option">Value 2</option>
  <option class="option">Value 3</option>
</select>

select {
  background-color: #fff;
  color: transparent;
}

.option {
  color: black; /* 在macOS中无法生效 */
}

这里select的样式可以生效，但.option的color设置被系统原生控件的样式覆盖了——macOS的原生下拉选项文本颜色由系统控件的默认样式或当前系统主题决定，浏览器不允许通过CSS单独修改<option>的这类属性。

不止color，诸如font-family、background-color等样式在macOS的<option>上也会存在不同程度的限制，不同浏览器的具体限制略有差异，但核心原因都是依赖系统原生控件而非浏览器自主渲染。

如果需要完全自定义下拉菜单的样式，通常的解决方案是放弃使用原生<select>元素，改用HTML+CSS+JavaScript模拟下拉组件，这样可以不受系统控件的限制，实现完全自定义的视觉效果。

内容的提问来源于stack exchange，提问作者DongBin Kim