phpMyAdmin网格编辑单元格的聚焦边框无法用:focus伪类修改，因其采用JS手动添加.editing等自定义class控制样式，而非触发原生focus状态；正确方式是通过custom.css覆盖.editing、.edit_mode等class的border和box-shadow。
直接改 phpMyAdmin 网格编辑单元格的聚焦边框，不能靠 CSS 伪类 :focus —— 因为它用的是内联 contenteditable 元素 + 自定义 JS 焦点管理，原生:focus不触发。
为什么直接写 input:focus 或 td:focus 没用？
phpMyAdmin 的网格编辑（尤其是 4.9+ 版本）在点击单元格时，并不会给 <td> 或内部 <code><input> 添加标准 focus 状态。它用 JS 手动添加 editing 类、切换 contenteditable="true"，并靠 class 控制样式。浏览器原生的 :focus 伪类根本不会匹配到这些动态编辑态。
- 你看到的“高亮边框”其实是
.editing或.edit_mode这类自定义 class 的效果 - 检查元素会发现：点击后
<td> 上多了 <code>class="editing"，但<input>可能压根没渲染出来（用的是div[contenteditable]） - 所有版本（3.4 到 5.2）都走这套逻辑，不是 bug，是设计选择
- 必须用
.editing（不是:focus）作为选择器主体 - 要覆盖默认边框，得加
!important，因为 phpMyAdmin 的内联 style 和common.css权重很高 - 推荐同时覆盖
border和box-shadow，否则阴影可能盖住新边框
修改边框颜色的正确位置：custom.css + .editing 类
phpMyAdmin 支持通过 custom.css 注入样式，这是唯一稳定、不随升级丢失的修改方式。路径通常是 /usr/share/phpmyadmin/css/custom.css（Linux）或 phpMyAdmin\css\custom.css（Windows），文件不存在就新建。
示例：
立即学习“PHP免费学习笔记（深入）”；
td.editing {
border: 2px solid #e63946 !important;
box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.3) !important;
}
不同版本的 class 名差异与兼容写法
phpMyAdmin 3.4–4.8 多用 .edit_mode，4.9+ 主推 .editing，但实际常共存。只写一个容易漏掉部分单元格。
- 安全写法是把常见 class 都列上，用逗号分隔
- 别漏掉
th—— 表头单元格在编辑模式下也可能获得焦点（比如排序字段） - 如果用了主题（如 dark mode），记得在
@media (prefers-color-scheme: dark)里重定义颜色，否则红框在深色背景上可能看不见
兼容性写法：
td.editing, th.editing,
td.edit_mode, th.edit_mode,
.edit_field {
border: 2px solid #d9534f !important;
outline: none !important;
}
改完不生效？检查三个硬性前提
即使 CSS 写对了，也常因以下原因白忙：
-
custom.css文件权限不对（需 web server 可读，如644） - 浏览器缓存了旧 CSS，强制刷新（
Ctrl+Shift+R）或清空 phpMyAdmin 的cache/目录 - 你改的是网格查看页（
tbl_select.php），但实际编辑触发在tbl_change.php，后者加载的 CSS 链略不同——建议把 custom.css 同时 link 到两个入口（通过 config.inc.php 的$cfg['Servers'][$i]['extension']不行，得靠 nginx/apache 重写或软链）
真正难的不是找到那几行 CSS，而是确认你正在调试的单元格到底属于哪个编辑分支：是 inline 编辑、批量编辑、还是 SQL 插入弹窗？每个分支的 DOM 结构和 class 命名都略有不同，得真机点开 DevTools 逐个验证。
