如何修改jQuery UI Autocomplete下拉建议项的字体大小

你之前的样式修改未生效，通常是两个原因：一是自定义样式加载顺序早于jQuery UI默认样式，被默认样式覆盖；二是未命中v1.12.1版本实际生效的子元素样式。

正确修改步骤 #

• 第一步：调整样式加载顺序，确保你的自定义CSS代码/文件，引入位置在jQuery UI的CSS文件之后。
• 第二步：使用优先级更高的对应选择器添加样式，v1.12.1版本中菜单项的文字默认包裹在.ui-menu-item-wrapper子元素内，需同时覆盖：

/* 覆盖Autocomplete下拉菜单容器层级样式 */
.ui-autocomplete.ui-menu {
  font-size: 16px; /* 可直接在这里设置全局字号，子元素默认继承 */
}

/* 如单独调整菜单项字号，使用下面的选择器 */
.ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper {
  font-size: 16px; /* 替换为你需要的字体大小 */
  padding: 6px 12px; /* 可选：同步调整内边距适配新字号，避免显示拥挤 */
}

• 第三步：如果修改后仍未生效，可先加!important做优先级验证：

.ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper {
  font-size: 16px !important;
}

验证生效后建议排查是否有其他冲突样式，尽量通过提高选择器优先级的方式实现效果，不推荐长期使用!important。

快速排查方法 #

打开浏览器开发者工具，选中下拉建议项的DOM元素，在「样式」面板查看font-size属性的生效来源，找到覆盖你自定义样式的选择器后，针对性调整即可。

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