CSS font-family对下拉列表无效，如何设置<option>元素字体？

问题核心原因 #

浏览器对原生<select>控件的<option>展开项样式支持存在限制——webkit内核浏览器（Chrome、Edge等）会强制用系统默认字体渲染下拉展开的选项，哪怕设置font-family甚至!important都无法覆盖，这是原生控件的渲染机制导致的。而color和background-color能生效，是因为浏览器允许修改这些基础样式，但字体不在开放自定义的范围内。

可行解决方案 #

1. 用自定义模拟组件替换原生下拉（推荐）

完全放弃原生下拉的展开部分，用HTML+CSS+JS模拟下拉结构，这样所有元素的样式都能完全自定义，包括字体。

示例代码：

/* 容器样式，用于下拉菜单定位 */
.custom-select-wrapper {
  position: relative;
  width: 200px;
}

/* 隐藏原生select，保留表单提交功能 */
.custom-select-wrapper select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* 自定义下拉触发按钮，匹配原生收起状态样式 */
.custom-select-trigger {
  font-family: 'AlwynNew', sans-serif;
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 自定义下拉菜单 */
.custom-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  background: #fff;
  z-index: 1;
}

/* 下拉选项样式，自定义字体可生效 */
.custom-dropdown .dropdown-option {
  font-family: 'AlwynNew', sans-serif;
  padding: 8px 12px;
  cursor: pointer;
}

.custom-dropdown .dropdown-option:hover {
  background-color: #f5f5f5;
}

/* 原生select获焦时显示下拉菜单 */
.custom-select-wrapper select:focus + .custom-dropdown {
  display: block;
}

对应的HTML结构：

<div class="custom-select-wrapper">
  <div class="custom-select-trigger">请选择选项</div>
  <select name="my-select">
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
    <option value="opt3">选项3</option>
  </select>
  <div class="custom-dropdown">
    <div class="dropdown-option" data-value="opt1">选项1</div>
    <div class="dropdown-option" data-value="opt2">选项2</div>
    <div class="dropdown-option" data-value="opt3">选项3</div>
  </div>
</div>

同步选中状态的简单JS：

// 点击自定义选项时同步原生select的值
document.querySelectorAll('.dropdown-option').forEach(option => {
  option.addEventListener('click', function() {
    const wrapper = this.closest('.custom-select-wrapper');
    const select = wrapper.querySelector('select');
    select.value = this.dataset.value;
    // 更新触发按钮的显示文本
    wrapper.querySelector('.custom-select-trigger').textContent = this.textContent;
    // 隐藏下拉菜单
    this.closest('.custom-dropdown').style.display = 'none';
  });
});

// 点击触发按钮切换下拉菜单显示
document.querySelectorAll('.custom-select-trigger').forEach(trigger => {
  trigger.addEventListener('click', function() {
    const dropdown = this.nextElementSibling.nextElementSibling;
    dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
  });
});

这种方法完全不受浏览器原生控件限制，同时保留原生<select>的表单提交功能，不会影响数据正常提交。

2. 针对部分浏览器的兼容方案（补充）

Firefox等少数浏览器支持对<option>设置自定义字体，可以尝试给<select>和<option>同时设置字体：

select, option {
  font-family: 'AlwynNew', sans-serif !important;
}

但注意：webkit内核浏览器（Chrome、Edge）依然不会生效，仅能作为部分场景的兼容方案。

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