在你这样做之前，请记住焦点轮廓是一个可访问性和可用性特性;它提示用户当前关注的元素是什么，许多用户依赖于它。你需要找到其他方法让焦点可见。

在你的情况下，试试:

input.middle:focus {
    outline-width: 0;
}

或者一般来说，影响所有基本的形式元素:

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

---

在评论中，Noah Whitmore建议进一步支持将contentteditable属性设置为true的元素(有效地使它们成为一种输入元素)。以下也应该针对这些(在支持CSS3的浏览器中):

[contenteditable="true"]:focus {
    outline: none;
}

虽然我不建议这样做，但为了完整性，你可以这样禁用所有的焦点轮廓:

*:focus {
    outline: none;
}

从所有输入中删除它

input {
 outline:none;
}

这是一个旧线程，但作为参考，重要的是要注意，不建议禁用输入元素的大纲，因为它阻碍了可访问性。

outline属性的存在是有原因的——为用户提供一个清晰的键盘焦点指示。有关该主题的进一步阅读和其他来源，请参阅http://outlinenone.com/

使用以下代码:

input:focus {
    outline: 0;
}

当焦点在元素上时，使用下面的CSS属性删除轮廓:

input:focus {
    outline: 0;
}

这个CSS属性删除焦点上所有输入字段的轮廓，或者使用伪类使用下面的CSS属性删除元素的轮廓。

.className input:focus {
    outline: 0;
} 

此属性删除所选元素的轮廓。

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

*:focus {
    outline: none;
}

这是一个实际的例子

你也可以试试这个

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

or

.classname input{
outline-style: none;
}

这是一个普遍的担忧。

浏览器渲染的默认大纲是丑陋的。

请看这个例子:

形式, 标签{ 保证金:1em自动; ｝ 标签{ 显示:块; ｝ < >形式 <label>点击查看下面的输入查看大纲</label> <input type="text" placeholder="placeholder text" /> > < /形式

---

大多数人推荐的最常见的“解决方案”是大纲:没有——如果使用不当——对可访问性来说是灾难。

---

所以…大纲有什么用呢?

我发现有个网站解释得很清楚。

它为有“焦点”的链接提供视觉反馈 使用TAB键(或同等功能)浏览网页文档。这是 对于那些不能使用鼠标或视觉的人来说尤其有用 障碍。如果你去掉了大纲，你就是在制作你的网站 这些人无法进入。

好的，让我们试试上面的例子，现在使用TAB键来导航。

形式, 标签{ 保证金:1em自动; ｝ 标签{ 显示:块; ｝ < >形式 <label>单击此文本，然后使用TAB键导航到代码段内部 <input type="text" placeholder="placeholder text" /> > < /形式

注意到即使不点击输入，你也能知道焦点在哪里?

现在，让我们尝试outline:none on our trusty <input>

因此，再次使用TAB键在单击文本后导航，看看会发生什么。

形式, 标签{ 保证金:1em自动; ｝ 标签{ 显示:块; ｝ 输入{ 大纲:没有; ｝ < >形式 <label>单击此文本，然后使用TAB键导航到代码段内部 <input type="text" placeholder="placeholder text" /> > < /形式

看到了吧，要想知道焦点在哪里更困难?唯一的标志就是闪烁的光标。我上面的例子过于简单了。在实际情况中，页面上不会只有一个元素。跟这个差不多。

.wrapper { width: 500px; max-width: 100%; margin: 0 auto; } form, label { margin: 1em auto; } label { display: block; } input { outline: none; } <div class="wrapper"> <form> <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> </form> <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> <form> <label for="GET-name">Name:</label> <input id="GET-name" type="text" name="name"> </form> <form> <label for="POST-name">Name:</label> <input id="POST-name" type="text" name="name"> </form> <form> <fieldset> <legend>Title</legend> <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form> </div>

现在，如果我们保留大纲，将其与相同的模板进行比较:

.wrapper { width: 500px; max-width: 100%; margin: 0 auto; } form, label { margin: 1em auto; } label { display: block; } <div class="wrapper"> <form> <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> </form> <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> <form> <label for="GET-name">Name:</label> <input id="GET-name" type="text" name="name"> </form> <form> <label for="POST-name">Name:</label> <input id="POST-name" type="text" name="name"> </form> <form> <fieldset> <legend>Title</legend> <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form> </div>

因此，我们已经建立了以下

轮廓很难看 移除它们会让生活更加困难。

---

那么答案是什么呢?

去掉难看的轮廓，添加你自己的视觉线索来显示焦点。

这里有一个非常简单的例子来说明我的意思。

我删除了轮廓并在:focus和:active上添加了一个底部边框。我还删除了顶部，左侧和右侧的默认边界，通过将它们设置为透明的:focus和:active(个人偏好)

形式, 标签{ 保证金:1em自动; ｝ 标签{ 显示:块; ｝ 输入{ 大纲:没有 ｝ 输入:焦点, 输入:活跃的{ 边框颜色:透明; Border-bottom: 2px纯红色 ｝ < >形式 <label>点击查看下面的输入查看大纲</label> <input type="text" placeholder="placeholder text" /> > < /形式

所以，我们在之前的“现实世界”例子中尝试上述方法:

.wrapper { width: 500px; max-width: 100%; margin: 0 auto; } form, label { margin: 1em auto; } label { display: block; } input { outline: none } input:focus, input:active { border-color: transparent; border-bottom: 2px solid red } <div class="wrapper"> <form> <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> </form> <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> <form> <label for="GET-name">Name:</label> <input id="GET-name" type="text" name="name"> </form> <form> <label for="POST-name">Name:</label> <input id="POST-name" type="text" name="name"> </form> <form> <fieldset> <legend>Title</legend> <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form> </div>

这可以通过使用外部库来进一步扩展，这些库建立在修改“大纲”的思想之上，而不是像Materialize那样完全删除它

你可以用很少的努力就得到一些不难看的东西

body { background: #444 } .wrapper { padding: 2em; width: 400px; max-width: 100%; text-align: center; margin: 2em auto; border: 1px solid #555 } button, .wrapper { border-radius: 3px; } button { padding: .25em 1em; } input, label { color: white !important; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" /> <div class="wrapper"> <form> <input type="text" placeholder="Enter Username" name="uname" required> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> </form> </div>

编辑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;
}

我尝试了所有的答案，我仍然不能让我的工作在移动，直到我找到-webkit-tap-highlight-color。

所以，对我有用的是……

* { -webkit-tap-highlight-color: transparent; }

这让我困惑了一段时间，直到我发现这条线既不是边界也不是轮廓，它是阴影。所以要移除它，我必须使用这个:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

在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 > < /

试试这个:

*:focus {
    outline: none;
}

这将影响您的所有页面。

这是唯一对我有效的办法

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

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);
 }

在Bootstrap 4中，您可以使用阴影-none来删除边界轮廓，它将删除焦点轮廓。

            <div class="form-group">
                <label for="exampleInputEmail1">Name</label>
                <input type="text" class="form-control form-control shadow-none" 
                id="exampleInputEmail1"aria-describedby="emailHelp">
            </div>

试试这个css，它为我工作

textarea:focus, input:focus{ border: none; }

: focus-visible

对可访问性的好消息- Chrome和Firefox增加了对 : focus-visible。

隐藏焦点样式是不好的做法，因为可访问性要求(键盘导航)会使你的网站更不容易访问。

使用:focus-visible伪类，并让浏览器决定何时应用焦点。

:focus-visible /* Chrome */

注意，Firefox通过一个旧的带前缀的伪类来支持类似的功能:

:-moz-focusring /* Firefox */

button { color: #000; background-color: #fff; padding: 10px 16px; margin: 10px 0; border-radius: 4px; } button:focus { box-shadow: 0 0 0 2px #E59700; outline: 0; } button:hover { background-color: #eee; } button.with-focus-visible:focus:not(:focus-visible) { box-shadow: none; outline: 0; } button.with-focus-visible:focus-visible, button.with-focus-visible:moz-focusring { box-shadow: 0 0 0 2px #E59700; outline: 0; } <p>Click on the button using a mouse. Then try tabbing to the button.</p> <button>without :focus-visible</button> <button class="with-focus-visible">with :focus-visible</button>

文档:https://developer.mozilla.org/en-US/docs/Web/CSS/: focus-visible

w3规格:https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo

焦点上的文本区域可能有框影..可以像这样删除:

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

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

解决方案是:

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

你实际上不应该使用outline: none，因为如果有人使用高对比度视图，那么他们将无法在黑暗背景上看到状态的变化。相反，你应该使用:

边框色:透明;