bug: High Contrast Mode paints the chat input focus ring on the inner editor instead of the visible field

问题场景

用户在升级到 Open WebUI v0.11.1（Docker 方式部署，运行于 Fedora Server）后，发现主聊天输入框“How can I help you today?”四周出现明显的实心蓝色外框。此现象同样出现在包含文本输入框的弹窗中（如「Input Variables」对话框）。重启应用或刷新页面后蓝色边框仍然存在，且深色主题下更为显眼。

报错原文

bug: High Contrast Mode paints the chat input focus ring on the inner editor instead of the visible field
Input fields show a prominent blue border.

原因分析

可能原因：当 Open WebUI 开启「高对比模式」时，样式表中包含针对输入控件焦点环的 CSS 规则。这条规则的作用范围选择器疑似错误地匹配到内部编辑器（contenteditable 区域）而非外层可见的输入框容器，导致预期的焦点样式被绘制到错误层级，表现为围绕整个输入组件的实体蓝色边框。Issue 评论确认该蓝色轮廓样式与「高对比模式」开关直接相关，关闭后样式即失效。部分维护者表示无法在本地复现，说明该问题可能还依赖浏览器或操作系统的无障碍/高对比度辅助设置。

环境排查

• 确认 Open WebUI 版本是否为 0.11.1 或更高（升级后首次出现）。
• 打开「用户设置」→「界面」，检查「高对比模式」选项是否处于开启状态。
• 检查操作系统或浏览器是否启用了系统级高对比度/强制色彩模式（例如 Windows 高对比度、Firefox 的「颜色」替代设置）。
• 测试不同浏览器（Firefox、Chrome、Edge）以确认问题是否与浏览器渲染差异有关。

解决步骤

1. 点击左下角用户头像，进入「设置」。
2. 切换到「界面」标签页。
3. 找到「高对比模式」或类似的辅助功能选项（英文界面显示为 High Contrast Mode 或 Accessibility Mode）。
4. 关闭该开关。
5. 返回聊天主界面，确认输入框的蓝色实体边框是否消失。

验证方法

关闭「高对比模式」后，主聊天输入框及各类弹窗内的文本框不应再出现明显的蓝色实体轮廓。需要说明的是，由于该问题并非在每台机器上都能复现，部分用户可能还需要同时关闭操作系统或浏览器级别的高对比度/强制色彩功能才能完全恢复预期外观。

参考来源

open-webui/open-webui #29031

AI 工具推荐

想把多个 AI 模型放在一个入口？

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。