phpmyadmin 4.9+ sql编辑器自动补全样式由codemirror v5控制，需通过自定义css注入覆盖.codemirror-hints等选择器，不可修改源码show-hint.css或js逻辑。
phpmyadmin 4.9+ 的 sql 编辑器自动补全样式由 codemirror 控制
phpmyadmin 自 4.9 版起，sql 编辑器底层换成了 codemirror（v5），自动补全下拉框（即 autocomplete dropdown）不再是原生 html select，而是用 dom 动态生成的 div + ul 结构，样式完全由 css 控制。直接改 sql.js 或 php 模板无效，必须定位到 codemirror 的 autocomplete 插件样式。
覆盖默认 autocomplete 下拉框样式的正确路径
phpMyAdmin 把 CodeMirror 相关 CSS 合并打包在 js/codemirror/addon/hint/show-hint.css 中，但该文件**不会被直接加载**——实际生效的是 phpMyAdmin 构建后生成的 css/common.css（或 css/theme.css，取决于主题）。所以不能改源码里的 show-hint.css，而要通过自定义 CSS 注入：
- 修改
config.inc.php，启用自定义 CSS：$cfg['CustomHeader'] = '/path/to/custom.css'; - 或更稳妥：在 phpMyAdmin 根目录新建
custom-css/文件夹，把 CSS 放进去，再通过$cfg['ExtraCSS'] = ['custom-css/my-sql-autocomplete.css']; - 关键选择器必须带
!important，因为 CodeMirror 内联样式优先级高
典型可覆盖的样式点：
/* 下拉框容器 */
.CodeMirror-hints { background: #2d2d2d !important; border: 1px solid #444 !important; }
<p>/<em> 每一项 </em>/
.CodeMirror-hint { color: #f8f8f2 !important; background: #3c3c3c !important; padding: 4px 8px !important; }</p><p>/<em> 当前高亮项 </em>/
.CodeMirror-hint-active { background: #007acc !important; color: white !important; }</p><p>/<em> 字体大小和圆角 </em>/
.CodeMirror-hints { font-size: 13px !important; border-radius: 4px !important; }</p>
为什么改了 CSS 还没生效？常见干扰点
最常踩的坑不是写错 CSS，而是被缓存或加载顺序卡住：
- 浏览器强制刷新（
Ctrl+Shift+R），禁用缓存调试 - 确认你的 CSS 文件确实被 phpMyAdmin 加载：查看页面源码，搜
my-sql-autocomplete.css是否出现在<link>中 - 如果用了 Dark Mode 主题，某些颜色变量（如
--pmad-bg）可能覆盖你的规则，直接用硬色值更稳 -
CodeMirror-hint元素是动态插入的，确保 CSS 在 DOM ready 后生效（一般没问题，但若用 JS 动态加载 CSS 就可能漏）
不建议动 phpMyAdmin 源码的两个原因
有人想直接改 js/codemirror/addon/hint/show-hint.js 里的 hintElement 生成逻辑，这不可取：
- 升级 phpMyAdmin 时整个
js/目录会被覆盖，所有修改丢失 - CodeMirror v5 的 hint 插件本身不暴露样式钩子，硬改 JS 容易破坏补全逻辑（比如
onSelect回调失效） - 真正需要定制行为（如过滤关键字、加图标）应通过
getHint配置项扩展，而不是改 DOM 结构
样式层的事，交给 CSS；逻辑层的事，用 CodeMirror 的 API 配置。混着改，后期维护成本翻倍。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
