你可以使用CSS来禁用它! 这是我用来禁用蓝色边框的代码:

*:focus {
    outline: none;
}

这是一个实际的例子

使用以下代码:

input:focus {
    outline: 0;
}

你也可以试试这个

input[type="text"] {
outline-style: none;
}

or

.classname input{
outline-style: none;
}

如果上面的解决方案不起作用，你可能正在使用bootstrap，因此.form-control类在默认情况下将box-shadow css属性应用到输入字段。

解决方案是:

.form-control {
    box-shadow: none;
}

编辑2021:你现在可以使用这个:https://github.com/WICG/focus-visible

一般来说，删除所有焦点样式对可访问性和键盘用户都是不利的。但是轮廓是丑陋的，并且为每个交互元素提供自定义的焦点样式可能是一个真正的痛苦。

因此，我发现最好的折衷办法是，只有当我们检测到用户正在使用键盘导航时，才显示大纲样式。基本上，如果用户按TAB键，我们就会显示轮廓，如果用户使用鼠标，我们就会隐藏轮廓。

它不会阻止您为某些元素编写自定义焦点样式，但至少它提供了一个很好的默认值。

我是这样做的:

// detect keyboard users const keyboardUserCssClass = "keyboardUser"; function setIsKeyboardUser(isKeyboard) { const { body } = document; if (isKeyboard) { body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass); } else { body.classList.remove(keyboardUserCssClass); } } // This is a quick hack to activate focus styles only when the user is // navigating with TAB key. This is the best compromise we've found to // keep nice design without sacrifying accessibility. document.addEventListener("keydown", e => { if (e.key === "Tab") { setIsKeyboardUser(true); } }); document.addEventListener("click", e => { // Pressing ENTER on buttons triggers a click event with coordinates to 0 setIsKeyboardUser(!e.screenX && !e.screenY); }); document.addEventListener("mousedown", e => { setIsKeyboardUser(false); }); body:not(.keyboardUser) *:focus { outline: none; } <p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p> <button>This is a button</button> <a href="#">This is anchor link</a> <input type="checkbox" /> <textarea>textarea</textarea> <select/>

试试这个:

*:focus {
    outline: none;
}

这将影响您的所有页面。