为什么 css "font-family:inherit" 会影响 Chrome 中 <select> 的颜色？ （举例）
Why is css "font-family:inherit" affecting color of <select> in Chrome? (with example)
我想知道为什么 <select> 元素在几个网页上的颜色不同。我注意到在某些页面上，如果 font-family:inherit css 属性 影响 select 元素，它看起来会有所不同 - blue!
<!-- BLACK -->
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<!-- BLUE -->
<select style="font-family: inherit;">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
我了解前端开发，我了解 normalize/reset。我想知道为什么 font-family:inherit 会影响 <select>
的颜色
有谁知道为什么会这样吗？字体系列的默认值（即继承）是多少？
Screenshot showing js fiddle result on mac
编辑：
Tony 在评论中发布了截图，font-family: system-ui; 正在影响 <select> 的外观。
编辑 2：
显然，将字体系列的决定留给设备是网页设计的一种趋势 - 所谓的本机字体。因此，表单也遵循指令并最终呈现为原生 UI 元素。
根据您使用的浏览器不同而不同。每个浏览器都有自己的默认设置。
您可以找到所有浏览器的默认样式列表 here。检查 chrome 上的元素时，您可以看到标记为 user agent stylesheet 的默认样式。下面是一个例子：
许多人使用 CSS 重置文件来跨浏览器标准化这些设置。 Eric Meyer's reset 是实现此目的的流行选项。
无论出于何种原因，表单元素上的 font-family 属性 无法在所有浏览器中 100% 可预测地设置样式。我不确定这是渲染还是安全原因，但在 Chrome 的情况下，system-ui 字体似乎是这里的罪魁祸首。
我想知道为什么 <select> 元素在几个网页上的颜色不同。我注意到在某些页面上，如果 font-family:inherit css 属性 影响 select 元素，它看起来会有所不同 - blue!
<!-- BLACK -->
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<!-- BLUE -->
<select style="font-family: inherit;">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
我了解前端开发，我了解 normalize/reset。我想知道为什么 font-family:inherit 会影响 <select>
有谁知道为什么会这样吗？字体系列的默认值（即继承）是多少？
Screenshot showing js fiddle result on mac
编辑：
Tony 在评论中发布了截图，font-family: system-ui; 正在影响 <select> 的外观。
编辑 2：
显然，将字体系列的决定留给设备是网页设计的一种趋势 - 所谓的本机字体。因此，表单也遵循指令并最终呈现为原生 UI 元素。
根据您使用的浏览器不同而不同。每个浏览器都有自己的默认设置。
您可以找到所有浏览器的默认样式列表 here。检查 chrome 上的元素时，您可以看到标记为 user agent stylesheet 的默认样式。下面是一个例子：
许多人使用 CSS 重置文件来跨浏览器标准化这些设置。 Eric Meyer's reset 是实现此目的的流行选项。
无论出于何种原因，表单元素上的 font-family 属性 无法在所有浏览器中 100% 可预测地设置样式。我不确定这是渲染还是安全原因，但在 Chrome 的情况下，system-ui 字体似乎是这里的罪魁祸首。