为何iOS/Safari中SELECT标签不继承父DIV的color样式？

核心原因 #

iOS Safari的**用户代理样式表（UA Stylesheet）**会直接给<select>及其内部的<option>元素设置明确的color属性值，这些直接作用在元素上的样式优先级高于从父元素继承来的样式。

具体来说，iOS Safari的UA样式会给<select>设置类似color: -webkit-link的规则（对应默认蓝色），这类直接绑定在元素上的样式，优先级天然高于父元素传递的继承属性——哪怕后者是自定义样式、前者是浏览器自带的UA样式。

验证与解决办法 #

要让<select>继承父元素的颜色，需要直接给<select>（建议同时覆盖<option>，避免下拉选项样式不一致）设置样式，或者强制它继承父元素属性：

方案1：直接指定color值

div {
  color: #000;
}
div select {
  color: #000;
}

方案2：强制继承父元素样式

div {
  color: #000;
}
div select,
div select option {
  color: inherit;
}

以上两种方式都能覆盖iOS Safari的UA样式，让<select>显示父元素指定的黑色。

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