如何使用HTML/CSS自定义输入框自动补全下拉菜单的字体？

问题描述 #

我有一个输入字段：

<input class="text-field__input" type="text" id="user-subject" name="user-subject" placeholder="Subject" required="" aria-label="Enter your Subject">

该输入字段设置为等宽字体（monospace），但在Chrome浏览器中出现以下问题：

• 点击输入框弹出的提示列表项使用非等宽字体
• 鼠标悬停提示项时，自动补全到输入框的文本也是非等宽字体，仅选中选项后才恢复为等宽字体

解决方法 #

Chrome的自动补全列表属于浏览器原生控件，直接修改样式有一定限制，但可以通过以下方式尝试解决：

1. 利用Chrome私有伪元素调整样式 #

Chrome支持通过::-webkit-autofill系列伪元素调整部分原生补全相关样式，可尝试为输入框添加以下CSS：

.text-field__input {
  font-family: monospace;
}

/* 强制设置补全填充时的输入框字体 */
.text-field__input::-webkit-autofill {
  font-family: monospace !important;
}

/* 尝试修改自动补全列表项字体（部分Chrome版本支持） */
input::-webkit-list-item {
  font-family: monospace !important;
}

注意：::-webkit-list-item这类伪元素的兼容性不稳定，不同Chrome版本可能存在差异。

2. 禁用原生补全，自定义实现 #

如果原生样式调整无法满足需求，可以关闭浏览器原生自动补全，通过JavaScript实现自定义补全列表，从而完全控制字体样式：

• 先给输入框添加属性关闭原生补全：

<input class="text-field__input" type="text" id="user-subject" name="user-subject" placeholder="Subject" required="" aria-label="Enter your Subject" autocomplete="off">

• 然后通过JavaScript监听输入事件，渲染自定义补全列表，列表的字体样式可通过CSS完全控制：

.custom-autocomplete-list {
  font-family: monospace;
}
.custom-autocomplete-list-item {
  font-family: monospace;
}

这种方式需要额外开发，但能彻底解决样式不一致的问题。

3. 修改Chrome全局字体设置（个人使用场景） #

如果是个人用户自己遇到该问题，可直接调整Chrome的全局字体设置：

• 打开Chrome设置 → 外观 → 自定义字体
• 将「等宽字体」设置为目标字体，原生自动补全列表会同步使用该字体

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