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

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

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

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

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

Carl W:

这种效果也会发生在非输入元素上。我发现下面是一个更通用的解决方案 :专注{ 边框色:透明; outline-style:没有; ｝

我来解释一下:

:focus意味着它对焦点中的元素进行样式化。因此，我们对焦点中的元素进行样式化。 边框色:透明;意味着蓝光是透明的。 outline-style:没有;做同样的事情。

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

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

resize: none;

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

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

-webkit-appearance: none;

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

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

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

有时也会发生按钮，然后使用下面来删除外线

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