如何放大phpMyAdmin SQL查询窗口-phpMyAdmin-PHP中文网

应为textarea[name="sql_query"]添加resize: vertical、min-height: 120px及line-height、padding等样式，并通过localStorage配合input事件持久化高度，同时确保custom.css路径正确且被config.inc.php启用。

SQL输入框默认高度太小，怎么手动拉伸？

默认情况下，phpmyadmin 的 textarea 输入框是固定高度、不可拉伸的。右下角那个小三角（resize 控制器）根本不会出现——不是浏览器不支持，而是 css 显式禁用了它。

关键不是加 resize: both;，而是只允许垂直方向拉伸，避免横向撑开破坏表格列宽或 Modal 布局：

定位到你的 phpMyAdmin 根目录下的 css/common.css 或自定义 CSS 文件（如 custom.css）

添加以下规则（无需 !important）：

textarea[name="sql_query"] {<br>  resize: vertical;<br>  overflow-y: auto;<br>  overflow-x: hidden;<br>  min-height: 120px;<br>}

overflow-x: hidden 很重要：SQL 不该靠换行来阅读，缩进用空格或 Tab，横向滚动会干扰语法识别

拖拽后高度不保存？localStorage 没生效

你拉大了输入框，刷新页面又回到原样——这不是 bug，是 phpMyAdmin 5.x 默认不读取 localStorage 存的尺寸值。它只存，不取；或者取了但没正确应用到 DOM 上。

要让拉伸高度持久化，必须在 DOM 加载完成后读取并设值：

检查是否在 DOMContentLoaded 阶段执行读取逻辑（不能等 window.load）

确保 JS 代码中使用：

const savedHeight = localStorage.getItem('sqlQueryHeight');<br>if (savedHeight) {<br>  const el = document.querySelector('textarea[name="sql_query"]');<br>  if (el) el.style.height = savedHeight + 'px';<br>}

同时监听 resize 事件写回：

el.addEventListener('input', () => {<br>  localStorage.setItem('sqlQueryHeight', el.scrollHeight);<br>});

（注意用 scrollHeight 而非 clientHeight，后者不含滚动内容）

用 custom.css 注入样式时，为什么没效果？

常见原因是路径或加载时机不对。phpMyAdmin 5.x 支持 $cfg['CustomCSS'] 配置，但必须满足三个条件才能生效：

btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

在 config.inc.php 中明确启用：$cfg['CustomCSS'] = 'custom.css';（路径是相对于 phpMyAdmin 根目录）
custom.css 必须放在 phpMyAdmin 根目录下（不是 ./css/ 子目录）
浏览器缓存常导致旧 CSS 未更新：强制刷新（Ctrl+Shift+R）或临时在 URL 后加 ?v=2
不要用 textarea#sqlquery 这类 ID 选择器——phpMyAdmin 有时会动态重写 ID；优先用属性选择器：textarea[name="sql_query"]

放大后光标错位、文字被截断怎么办？

这是字体行高与 line-height、padding 不匹配导致的视觉错位，尤其在高 DPI 屏幕或缩放比例 >100% 时明显。

安全做法是统一控制内边距和行高：

在 custom.css 中补上：

textarea[name="sql_query"] {<br>  line-height: 1.4;<br>  padding: 8px 12px;<br>  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;<br>}

避免用 height: 300px !important 这种硬编码——它会覆盖 JS 动态调整，且无法响应内容增长
如果启用了代码高亮插件（如 Codemirror），确认其容器也同步设置了 resize: vertical，否则编辑器内部滚动条会失效

真正难调的不是高度本身，而是 textarea 和它包裹的 CodeMirror 实例之间的高度同步逻辑——一旦 JS 初始化晚于 CSS 应用，就会出现“看起来拉开了，实际可编辑区域没变”的假象。