Firefox环境下HTML select下拉选项无故变为粗体的原因排查

我在搭建包含HTML <select> 标签的原生静态站点时，遇到下拉选择框的选项无理由显示为粗体的异常：

此前我在复杂项目中也遇到过相同问题，当时误以为是多框架、第三方库的样式冲突导致，但本次站点仅使用原生HTML/CSS/JavaScript开发，不存在框架冲突可能。

相关代码 #

页面HTML结构如下：

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />

<form action="javascript:calculate();" method="post">
    Select the option with
    <select name="select1" class="select1" onchange="document.getElementById('lpd').placeholder=this.value" required>
        <option value="13">Option 1</option>
        <option value="15">Option 2</option>
    </select>
</form>

和输入控件相关的CSS代码如下：

*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html,
body {
    height: 100%;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
input,
button,
textarea,
select {
    font: inherit;
}

input,
textarea,
select {
    background-color: unset;
    text-align: center;
    border: none;
    font-weight: 400;
    border-bottom: 3px solid black;
}

.container {
    font-family: "Inter", sans-serif;
    padding-top: 6em;
    text-align: center;
    line-height: 2em;
    margin-right: auto;
    margin-left: auto;
    height: 100vh;
}

select {
    padding: 0.2em;
    padding: 0.3em 0;
    margin: 0 0.3em;
}

input {
    padding: 0.3em 0;
    margin: 0 0.5em;
}

已尝试排查 #

• 移除CSS重置规则中input, button, textarea, select { font: inherit; }后问题消失，但所有input标签会恢复默认字体大小，无法保留字体继承能力
• 尝试通过.select1 *选择器直接给option元素设置font-weight属性，仅能修改背景色等属性，无法改变粗体显示效果
• 该问题仅在Firefox浏览器中出现，Chrome下表现正常，可稳定复现

这是Firefox对原生表单控件的默认渲染逻辑导致的，不属于代码bug：

1. 给select设置font: inherit时，Firefox只会让下拉选择框本身（收起状态）继承父元素的字体属性，弹出的下拉选项列表属于浏览器原生UI组件，默认不会继承font-weight属性，仅支持修改背景色、文字颜色等少量样式，因此直接给option设置font-weight默认不生效。
2. 页面引入的Inter字体在Firefox原生下拉组件中渲染时，字重匹配逻辑异常，没有正确加载400常规字重，最终 fallback 为粗体显示。

无需移除font: inherit规则，选择以下任意一种方案即可解决：

方案1：显式指定option字体属性（侵入性最小，推荐） #

在原有CSS中追加以下规则，强制下拉选项继承正确的字体和字重：

select option {
    font-family: inherit;
    font-weight: 400;
}

如果上述规则在当前Firefox版本中不生效，直接明确指定字体族即可：

select option {
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

方案2：移除原生下拉样式，完全自定义控件样式 #

如果需要完全控制下拉框所有部分的样式，可以通过appearance属性关闭浏览器原生渲染，自行实现下拉箭头等样式，此时下拉选项会完全受CSS控制：

select {
    /* 保留原有select样式，追加以下内容 */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /* 自定义下拉箭头，可根据需求替换 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 1.2em;
}

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