在Firefox中，没有一个解决方案对我有效。

下面的解决方案更改了Firefox的焦点边框样式，并将其他浏览器的大纲设置为none。

我已经有效地使焦点边界从3px的蓝色发光到与文本区域边界匹配的边界样式。下面是一些边框样式:

虚线边界(边界2px红色虚线):

没有边界!(边境0 px):

Textarea border(边框1px纯灰色):

代码如下: 输入:焦点，textarea:焦点{ 大纲:没有;/**对于Safari, etc **/ 边框:1px纯灰色;/** For Firefox **/ ｝ #{文本区域 位置:绝对的; 上图:10 px; 左:10 px; 右:10 px; 宽度:calc(100% - 20px); 身高:160 px; 显示:inline-block; margin-top: -0.2 em; ｝ < textarea id = " textarea”>哟textarea > < /

如果上面的解决方案不起作用，你可能正在使用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/>

您可以使用:outline:none删除文本/输入框周围的橙色或蓝色边框(outline)

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

在Firefox中，没有一个解决方案对我有效。

下面的解决方案更改了Firefox的焦点边框样式，并将其他浏览器的大纲设置为none。

我已经有效地使焦点边界从3px的蓝色发光到与文本区域边界匹配的边界样式。下面是一些边框样式:

虚线边界(边界2px红色虚线):

没有边界!(边境0 px):

Textarea border(边框1px纯灰色):

代码如下: 输入:焦点，textarea:焦点{ 大纲:没有;/**对于Safari, etc **/ 边框:1px纯灰色;/** For Firefox **/ ｝ #{文本区域 位置:绝对的; 上图:10 px; 左:10 px; 右:10 px; 宽度:calc(100% - 20px); 身高:160 px; 显示:inline-block; margin-top: -0.2 em; ｝ < textarea id = " textarea”>哟textarea > < /

这是唯一对我有效的办法

边界实际上是一个影子。所以为了隐藏它，我不得不这样做:

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }