如何删除输入文本元素上的边框突出显示

当一个超文本标记语言元素被“聚焦”（当前选中/选项卡输入）时，许多浏览器（至少Safari和Chrome）会在它周围放一个蓝色边框。

对于我正在进行的布局，这是分散注意力的，看起来不正确。

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox似乎没有这样做，或者至少让我用以下方式控制它：

border: x;

如果有人能告诉我IE的表现，我会很好奇。

让Safari去除这一点点耀斑会很好。

826803 次浏览
小开
最佳答案

在执行此操作之前，请记住焦点大纲是一项可访问性和可用性功能；它会引导用户了解当前关注的元素，并且很多用户都依赖它。您需要找到一些其他方法来使焦点可见。

在你的情况下，尝试：

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

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

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

在评论中，诺亚·惠特莫尔建议进一步支持将contenteditable属性设置为true的元素（有效地使它们成为一种输入元素）。以下也应该针对这些（在支持CSS3的浏览器中）：

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

虽然我不推荐它，但为了完整起见，您始终可以使用以下命令禁用一切上的焦点大纲：

*:focus {
outline: none;
}
小开

从所有输入中删除它

input {
outline:none;
}
小开

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

大纲属性的存在是有原因的——为用户提供键盘焦点的明确指示。有关此主题的进一步阅读和其他来源，请参阅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;
}

或

.classname input{
outline-style: none;
}
小开

这是一个共同的关切。

浏览器呈现的默认大纲是丑陋的。

看看这个例子：

form,
label {
margin: 1em auto;
}


label {
display: block;
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>

最常见的“修复”最推荐的是outline:none-如果使用不当-是灾难的可访问性。

那么…大纲有什么用呢？

我找到了一个非常枯燥的网站，它很好地解释了一切。

它为具有“焦点”的链接提供视觉反馈 使用TAB键（或等效键）导航Web文档。这是 特别适用于那些不能使用鼠标或视觉的人 损伤。如果您删除大纲，您将使您的网站 #36825；的人

好的，让我们尝试与上面相同的示例，现在使用TAB键进行导航。 

form,
label {
margin: 1em auto;
}


label {
display: block;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>

请注意，即使不单击输入，您也可以知道焦点在哪里？

现在，让我们在我们可信赖的<input>上尝试outline:none

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

form,
label {
margin: 1em auto;
}


label {
display: block;
}


input {
outline: none;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>

看看弄清楚焦点在哪里是多么困难？唯一能说明问题的标志是光标闪烁。我上面的例子过于简单。在现实世界的情况下，你不会在页面上只有一个元素。更多的东西是这样的。 

.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>

因此，我们建立了以下

  1. 轮廓很丑
  2. 删除它们会使生活更加困难。

那么答案是什么？

删除丑陋的轮廓并添加您自己的视觉提示以指示焦点。

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

我删除了轮廓并在：重点和：活跃上添加了底部边框。我还通过在：重点和：活跃上将它们设置为透明来删除顶部、左侧和右侧的默认边框（个人偏好）

form,
label {
margin: 1em auto;
}


label {
display: block;
}


input {
outline: none
}


input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid red
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>

因此，我们用前面的“真实世界”示例尝试上面的方法：

.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>

这可以通过使用外部库进一步扩展，这些库基于修改“大纲”的想法，而不是像物化那样完全删除它

你可以结束的东西是不是丑陋和工程与很少的努力

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

小开

您可以使用以下命令删除文本/输入框周围的橙色或蓝色边框（轮廓）：大纲：无

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焦点上的边框样式，并将其他浏览器的轮廓设置为无。

我有效地使焦点边框从3px蓝色发光变为与文本区域边框匹配的边框样式。这是一些边框样式：

虚线边框（边框2px虚线红色）： 虚线边框.边框2px虚线红色

无边框！（边框0px）：
无边框.边框： 0px

文本区域边框（边框1px纯灰色）： 文本区域边框。边框1px纯灰色

以下是代码：

input:focus, textarea:focus {
outline: none; /** For Safari, etc **/
border:1px solid gray; /** For Firefox **/
}


#textarea  {
position:absolute;
top:10px;
left:10px;
right:10px;
width:calc(100% - 20px);
height:160px;
display:inline-block;
margin-top:-0.2em;
}
<textarea id="textarea">yo</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中删除边框轮廓可以使用shadow-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/：聚焦可见

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

小开

焦点上的文本区域可能有框阴影…它可以像这样删除：

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

如果上述解决方案不起作用，您可能正在使用引导程序，因此.form-control类默认将box-shadow css属性应用于您的输入字段。

解决办法将是：

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

提交答案