如何摆脱 Chrome/Safari 上的文本框选择突出显示？ [复制]

Posted 2023-02-22

【中文标题】如何摆脱 Chrome/Safari 上的文本框选择突出显示？ [复制]

【英文标题】：How to get rid of text box selection highlight on Chrome/Safari? [duplicate]

【发布时间】：2011-04-16 07:50:51

【问题描述】：

使用 Chrome 或 Safari 时，active text box 或 text area 将在框周围显示蓝色/橙色 border。我已经看到一些网站摆脱了这个，但我复制了他们的CSS，它仍然存在。我该怎么做？

【问题讨论】：

关于这个问题，我想知道是否可以更改轮廓的颜色而不仅仅是删除它？我在同一个位置，当轮廓出现时，我得到一个难看的绿色。改变它会很棒！

【参考方案1】：

你可以使用

input:focus, textarea:focus 
    outline: 0;

但出于可访问性的原因，请尝试向用户指示表单元素已聚焦。

【讨论】：

好吧，我要为你+1，因为我们同时提出了相同的答案......（否则我会觉得很粗鲁）=）

【参考方案2】：

以下 CSS 通常会移除默认的高亮边框：

input:focus outline: none; 

值得记住的是，对于那些不使用鼠标的用户（例如键盘导航），轮廓是 UI 焦点的有用视觉反馈，值得用另一种视觉提示来代替轮廓的丢失。

【讨论】：

谢谢！是的，我绝对是……只是我有输入的背景，这使它看起来很难看。

@Chris，总是很高兴。这是一个以防万一的提醒，无意冒犯=)

【参考方案3】：

我刚刚这样做了：

:focus  outline: none;