应保留可见焦点指示器以保障可访问性；推荐用outline-offset微调、box-shadow模拟或:focus-visible条件禁用outline；textarea嵌套table时需避免轮廓截断，优先改用语义更合适的布局。

直接去掉 outline 就行，但别一刀切用 outline: none —— 这会破坏可访问性，键盘用户将无法识别当前焦点位置。

为什么 textarea 聚焦时有蓝色轮廓

这是浏览器默认的 :focus 样式，由 UA stylesheet 提供，目的是让键盘导航用户清楚知道哪个控件正被操作。它不是 bug，是 WCAG 推荐的可见焦点指示器。

• Chrome / Edge 默认用 outline: -webkit-focus-ring-color auto 1px
• Firefox 用 outline: 1px dotted rgba(0,0,0,.5)
• 该轮廓绘制在元素边框之外，不受 border-radius 影响

安全替换轮廓的三种写法

既要视觉统一，又不能牺牲可访问性。推荐以下任一方式（按优先级排序）：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 用 outline-offset 微调位置：比如 outline-offset: -2px 让轮廓紧贴边框内侧，避免“双线”错觉
• 用 box-shadow 模拟轮廓：例如 textarea:focus { box-shadow: 0 0 0 2px #007bff; }，支持圆角、透明度，且不会干扰屏幕阅读器
• 仅在鼠标操作后禁用 outline：配合 :focus-visible（现代浏览器支持），textarea:focus:not(:focus-visible) { outline: none; }，保留键盘焦点高亮

textarea 和 table 共存时的常见冲突

当 textarea 放在表格单元格（td）里，且表格设置了 border-collapse: collapse，容易出现聚焦时轮廓被截断或偏移。

• 根本原因是 outline 始终相对于元素盒模型绘制，而 td 的 padding / border 可能挤压可用空间
• 临时解法：给 td 加 position: relative，再给 textarea:focus 加 z-index: 1
• 更稳妥做法：避免把交互控件（尤其是需焦点管理的）嵌套在语义化表格结构中；展示数据用 table，表单布局改用 div + CSS Grid/Flex

真正难处理的不是样式本身，而是「什么时候该保留默认焦点行为」——比如用户用 Tab 键从一个 input 切到 textarea，如果此时轮廓消失，他就失去了上下文感知。这点常被忽略，但直接影响残障用户的操作流。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！