必须配合替代视觉反馈才能安全取消textarea聚焦轮廓，否则破坏键盘可访问性；outline:none有时无效是因被user-agent样式或更高优先级规则覆盖，尤其表格中受border-collapse、框架样式及box-shadow干扰。
直接取消 textarea 的聚焦轮廓（即点击后出现的蓝色/黑色虚线框）不能只写 outline: none，必须配合替代视觉反馈，否则会破坏键盘可访问性。
为什么 textarea:focus { outline: none } 有时没效果？
常见原因不是 CSS 写错了，而是被浏览器 user-agent 样式或更高优先级规则覆盖。尤其在表格中嵌套的 textarea，可能受以下干扰：
- 父级
table或td的border-collapse、padding影响视觉判断，误以为“轮廓还在” - 某些 UI 框架（如 Bootstrap）对
form-control类做了强化 focus 样式，需用更具体选择器覆盖 - 未重置
box-shadow：Chrome/Safari 在 focus 时可能叠加box-shadow（比如0 0 0 3px rgba(0,123,255,.25)），单靠outline: none清不掉 -
outline: 0是过时写法，必须用outline: none
textarea 在表格里点击后高亮怎么关？安全方案
目标是：鼠标点击时去掉干扰轮廓，但键盘 Tab 进来时仍要有清晰焦点提示。推荐组合写法：
/* 表格内所有 textarea */
table textarea {
border: 1px solid #d1d5db;
padding: 6px 8px;
}
<p>table textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
/<em> 不要漏掉这个，否则 Safari 可能保留默认阴影 </em>/
-webkit-box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}</p><p>/<em> 可选：仅键盘聚焦才显示轮廓（需现代浏览器支持） </em>/
table textarea:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
border-color: #d1d5db;
}</p><p>table textarea:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
box-shadow: none;
}
</p>
注意：:focus-visible 在 Firefox 和新版 Chrome/Edge 中稳定支持，但旧版 Safari（≤15.6）不支持，生产环境建议先加基础 focus 样式兜底。
表格里点 textarea 触发整行高亮？那是 JS 干的
纯 CSS 无法让点击 textarea 导致其所在 tr 变色——这一定是 JavaScript 在监听 textarea 的 focus 或 click 事件，并手动给 tr 加类。如果你不想它高亮，检查 JS 代码里是否有类似：
textarea.addEventListener('focus', e => e.target.closest('tr').classList.add('selected'))- 或 jQuery 的
$('textarea').on('click', function() { $(this).closest('tr').addClass('highlight') })
关闭方式很简单：删掉或注释掉对应事件绑定；如果不能改 JS，可用 CSS 强制覆盖：tr.selected td textarea:focus { background: inherit; }，但治标不治本。
真正难处理的不是“怎么关”，而是“关了之后键盘用户找不到焦点在哪”。所以每次删 outline 前，务必确认已提供等效的视觉反馈——哪怕只是加个边框变色或外阴影。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
