phpMyAdmin左侧导航栏滚动条美化方法

phpMyAdmin左侧导航栏滚动条美化需通过修改navigation css文件或config inc php注入自定义样式。在文件中添加针对 serveritems容器的::-webkit-scrollbar规则可实现窄化、圆角与柔和配色。此方法仅对Chromium内核浏览器有效，Firefox不支持。修改后需清除浏览器缓存。

许多从事运维或开发的用户，常常会遇到一个令人困扰的问题：phpMyAdmin 左侧导航栏的滚动条样式过于原始，与整体界面显得格格不入。尽管希望对其进行美化，但后台设置中并未提供相关选项。

这背后的原因是，phpMyAdmin 默认采用浏览器的原生滚动条，且并未内置任何针对滚动条的主题配置。因此，要改变其外观，只能通过“硬改”方式：直接修改 CSS 文件，或通过配置注入自定义样式。

如何在phpMyAdmin中将左侧导航栏的滚动条美化？

最直接的方法：修改 na vigation.css 文件

最稳妥且生效范围最明确的方式，莫过于直接修改 na vigation.css 文件。在 phpMyAdmin 5.0 及以上版本中，左侧导航栏的所有样式均由该文件控制。其路径通常位于 phpMyAdmin 根目录下的 ./css/na vigation.css。

具体操作非常简便：找到该文件，在末尾追加一段针对滚动条的 ::-webkit-scrollbar 系列规则。需要注意的是，该规则仅对 Chromium 内核的浏览器（如 Chrome、Edge）及 Safari 生效。

例如，若希望导航栏滚动条更窄、带有圆角且颜色更加柔和，可添加如下代码：

/* 导航栏滚动条美化 */
#serveritems::-webkit-scrollbar {
  width: 6px;
}
#serveritems::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}
#serveritems::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
#serveritems::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

这里有一个关键点必须强调：#serveritems 这个 ID 是 phpMyAdmin 左侧数据库列表容器的实际标识，并非随意命名。若选择器错误，即使代码再完美也无济于事。

没有文件权限时的替代方案：通过 config.inc.php 注入

如果你使用的是托管环境（如 cPanel 自带的 phpMyAdmin），或服务器没有文件写入权限，无法直接修改 CSS 文件，也无需担心。phpMyAdmin 提供了 $cfg['Na vigationTreeCustomStyle'] 配置项，允许在配置文件中动态注入样式。

操作也很简单，在 config.inc.php 里加上这么一行就行：

$cfg['Na vigationTreeCustomStyle'] = '::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f8f9fa; } ::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 3px; }';

该配置的优点是仅影响导航树区域，不会干扰界面其他部分的样式。但同样需要提醒，Firefox 用户无法看到此效果，因为 Firefox 不支持 ::-webkit-scrollbar 属性。

为什么不能用主题或插件来搞定？

或许有人会问，是否存在现成的主题或插件可以一步到位？答案是否定的。phpMyAdmin 本身既未提供滚动条的主题钩子，也未形成成熟的第三方滚动条插件生态。市面上那些声称能“美化”的插件，本质上无非以下几种方式：

覆盖 na vigation.css 文件，即我们上述的第一种方法。
使用 Ja vaScript 动态插入