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

【问题标题】：How to get rid of text box selection highlight on Chrome/Safari? [duplicate]如何摆脱 Chrome/Safari 上的文本框选择突出显示？ [复制]
【发布时间】：2011-04-16 07:50:51
【问题描述】：

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

【问题讨论】：

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

标签： css

【解决方案1】：

你可以使用

input:focus, textarea:focus {
    outline: 0;
}

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

【讨论】：

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

【解决方案2】：

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

input:focus {outline: none; }

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

【讨论】：

谢谢！是的，我绝对是……只是我有输入的背景，这使它看起来很难看。
@Chris，总是很高兴。这是一个以防万一的提醒，无意冒犯=)

【解决方案3】：

我刚刚这样做了：

:focus { outline: none; }

【讨论】：