删除Safari / Chrome文本输入/ textarea发光

我发现删除“滑动门”类型的输入按钮上的轮廓很有帮助，因为轮廓没有覆盖滑动门图像的右侧“帽​​”，从而使焦点状态看起来有些不规则。

input.slidingdoorbutton:focus { outline: none;}

有时候，按钮也会在下面使用，以删除外线

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

这个解决方案对我有用。

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

如果要删除Bootstrap中按钮的辉光（我认为这不一定是糟糕的UX），则需要以下代码：

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

这种效果也可能发生在非输入元素上。我发现以下作品可以作为更通用的解决方案

:focus {
  outline-color: transparent;
  outline-style: none;
}

---

更新：您可能不必使用:focus选择器。如果您有一个元素，例如说<div id="mydiv">stuff</div>，并且您正在此div元素上获得外部辉光，则像通常一样应用：

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

这是关心可访问性的人们的解决方案。

请不要使用outline:none;禁用焦点轮廓。如果执行此操作，则会杀死Web的可访问性。有一种可访问的方法。

查看我写的这篇文章，以解释如何以一种易于访问的方式删除边框。

简而言之，想法是仅在我们检测到键盘用户时才显示轮廓边框。用户开始使用鼠标后，我们将禁用轮廓。结果，您可以充分利用两者的优势。

我在一个div具有点击事件的上遇到了这种情况，经过20次搜索后，我发现该摘要节省了我的时间。

-webkit-tap-highlight-color: rgba(0,0,0,0);

这将禁用Webkit移动浏览器中的默认按钮突出显示

卡尔·W：

这种效果也可能发生在非输入元素上。我发现以下作品可以作为更通用的解决方案

:focus {
  outline-color: transparent;
  outline-style: none;
}

我将解释这一点：

• :focus表示它可以对焦点元素进行样式设置。因此，我们正在设计重点元素。
• outline-color: transparent; 表示蓝色发光是透明的。
• outline-style: none; 做同样的事情。

在基于Webkit的浏览器中调整textarea大小时：

在textarea上设置max-height和max-width不会删除视觉调整手柄。尝试：

resize: none;

（是的，我同意“尝试避免做任何会破坏用户期望的事情”，但有时确实是有道理的，即在Web应用程序的上下文中）

要从头开始自定义Webkit表单元素的外观：

-webkit-appearance: none;