如果你想移除Bootstrap中按钮的辉光(在我看来这并不一定是糟糕的用户体验)，你需要以下代码:

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

在基于webkit的浏览器中调整文本区域大小:

在文本区域设置max-height和max-width不会移除可视的调整大小手柄。试一试:

resize: none;

(是的，我同意“尽量避免做任何打破用户期望的事情”，但有时它确实是有意义的，例如在web应用程序的上下文中)

要从头定制webkit表单元素的外观和感觉:

-webkit-appearance: none;

编辑(11年后):不要这样做，除非您要提供一个回退来指示哪个元素是活动的。否则，这会损害可访问性，因为它实际上删除了显示文档中哪个元素具有焦点的指示。想象一下，你是一个键盘用户，却不知道你可以与什么元素交互。在这里，让易用性胜过美学。

textarea, select, input, button { outline: none; }

尽管，有人认为保持发光/轮廓实际上有利于可访问性，因为它可以帮助用户看到当前关注的元素。

您还可以使用伪元素':focus'来只针对用户选择的输入。

演示:https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

这是为那些关心可访问性的人提供的解决方案。

请不要使用outline:none;用于禁用焦点轮廓。如果你这样做，你是在扼杀网络的可访问性。有一种可行的方法。

看看我写的这篇文章，它解释了如何以一种可访问的方式删除边界。

简而言之，当我们检测到键盘用户时，只显示轮廓边框。一旦用户开始使用他的鼠标，我们禁用大纲。结果你得到了两者中最好的。

这种效果也会发生在非输入元素上。我发现下面是一个更通用的解决方案

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

更新:您可能不必使用:focus选择器。如果你有一个元素，说<div id="mydiv">stuff</div>，你得到了这个div元素的外部发光，就像正常应用:

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

我在一个有点击事件的div上经历了这一点，在20次搜索之后，我发现这个片段挽救了我的一天。

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

这将禁用webkit移动浏览器中的默认按钮高亮显示