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

问：

当一个 HTML 元素被“聚焦”（当前选择/选项卡式）时，许多浏览器（至少是 Safari 和 Chrome）会在它周围放置一个蓝色边框。

对于我正在处理的布局，这会分散注意力并且看起来不对。

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

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

border: x;

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

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

css 输入 safari webkit 边框

答：

1385赞 Cᴏʀʏ 9/22/2009 #1

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

在这种情况下，请尝试：

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

或者，一般来说，要影响所有基本表单元素：

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

在评论中，Noah Whitmore 建议更进一步，以支持属性设置为的元素（有效地使它们成为一种输入元素）。以下内容也应该针对这些（在支持 CSS3 的浏览器中）：contenteditabletrue

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

虽然我不推荐它，但为了完整起见，你总是可以用这个来禁用所有内容的焦点大纲：

*:focus {
    outline: none;
}

11赞 BaronGrivet 10/17/2011

谢谢科里，很棒的提示。您还需要将 CSS 分配给 textarea 以覆盖所有输入字段。input:focus, textarea:focus {outline: none;}

7赞 Geek Num 88 10/27/2011

不要忘记选择select:focus {outline:none;}

2赞 Chris Parton 10/16/2012

还有标签，它被 jQuery UI 和 Twitter Bootstrap 等使用，所以为了完整起见，我会添加到列表中。<button>button: focus

1赞 Noah Whitmore 1/2/2014

鉴于 HTML 5 属性 contenteditable，值得注意的是，任何可编辑元素在具有焦点时都会有轮廓（在许多浏览器中），因此或几乎任何元素也可以在这里应用。div:focus {outline:none}p:focus {outline:none}

6赞 Josef Engelfrost 8/8/2017

@C ᴏʀʏ 你介意把关于 a11y 和可用性的注释移到你问题的顶部吗？IMO 这将大大改善您的答案，因为删除 a11y 功能是一种不好的做法。

81赞 marcjae 3/23/2011 #2

从所有输入中删除它

input {
 outline:none;
}

39赞 Boaz 12/30/2012 #3

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

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

1赞 Anish Nair 1/31/2013

Boaz，仅供参考 input.middle{outline： none} 仍然允许您遍历元素（包括 input.middle）。按 Tab 键也将聚焦在输入标签上。唯一的问题是你将无法看到它的焦点（轮廓焦点）。所以使用它并没有什么害处。: )

13赞 Boaz 1/31/2013

@AnishNair - 这正是我的观点。删除轮廓将禁用焦点事件的视觉指示，而不是实际事件的视觉指示。移除视觉指示意味着您会让依赖该指示的残障人士更难。Only thing is that you won't be able to see the focus(outline focus) on it

2赞 Anish Nair 1/31/2013

有时我们需要妥协，才能实现某些目标：）

10赞 Boaz 1/31/2013

@AnishNair真的。但更多时候，阅读此线程的人更喜欢简单的出路（即），而不考虑其影响。仅仅因为某件事很容易并节省时间，并不意味着它是最佳实践:)outline:none;

6赞 Meg 7/26/2014

我讨论晚了，但您仍然可以设置输入的焦点状态的样式（例如更改边框颜色或宽度）。只要您在执行此操作时牢记可访问性（良好的对比度等），它就与默认轮廓一样可访问。

4赞 Touhid Rahman 5/23/2013 #4

使用以下代码：

input:focus {
    outline: 0;
}

0赞 Shailesh 12/10/2015 #5

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

input:focus {
    outline: 0;
}

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

.className input:focus {
    outline: 0;
}

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

7赞 1010 2/23/2016 #6

您可以使用CSS来禁用它！这是我用于禁用蓝色边框的代码：

*:focus {
    outline: none;
}

这是一个工作示例

3赞 Santosh Khalse 12/16/2016 #7

你也可以试试这个

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

或

.classname input{
outline-style: none;
}

31赞 I haz kode 8/24/2017 #8

这是一个普遍关注的问题。

浏览器呈现的默认轮廓很丑陋。

例如，请参阅以下内容：

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 文档。这是对于不会使用鼠标或没有视觉效果的人来说特别有用损害。如果您删除了大纲，则您正在制作您的网站这些人无法进入。

好的，让我们尝试一下与上面相同的示例，现在使用键进行导航。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>

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

现在，让我们试试我们值得信赖的outline:none<input>

因此，再次使用键在单击文本后进行导航，看看会发生什么。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>

因此，我们建立了以下内容

轮廓很丑陋
移除它们会使生活更加困难。

那么答案是什么呢？

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

这是一个非常简单的例子。

我删除了轮廓并在：focus 和：active 上添加了一个底部边框。我还删除了顶部、左侧和右侧的默认边框，方法是将它们设置为透明的：focus和：active（个人偏好）

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>

这可以通过使用外部库来进一步扩展，这些库建立在修改“大纲”的想法之上，而不是像 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>

13赞 Tom Esterez 9/16/2017 #9

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

1赞 Keith DC 1/11/2019

这是一种彻底的方法。听众是一个很好的触感。click

2赞 Rizwan 2/28/2018 #10

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

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

8赞 Oneezy 4/5/2018 #11

我尝试了所有的答案，但我仍然无法让我的在移动设备上工作，直到我发现.-webkit-tap-highlight-color

所以，对我有用的是......

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

1赞 Anand G 3/15/2019

这就是我一直在寻找的解决方案。当您使用诸如 li 之类的元素进行触摸屏体验时，这特别有用

50赞 Rikard Askelöf 4/24/2018 #12

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

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

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

1赞 kpozin 7/21/2023

隐藏阴影对于实现无边框是绝对必要的（至少在 MacOS 上的 Chrome 114 中）。

3赞 1.21 gigawatts 5/12/2018 #13

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

以下解决方案更改了 Firefox 的焦点边框样式，并将其他浏览器的轮廓设置为无。

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

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

没有国界！（边框 0px）：

文本区域边框（边框 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>

0赞 subindas pm 11/29/2019 #14

试试这个：

*:focus {
    outline: none;
}

这将影响您的所有页面。

18赞 Ali 2/19/2020 #15

唯一对我有用的解决方案

边框实际上是一个阴影。所以为了隐藏它，我不得不这样做：

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

5赞 vidy 6/19/2020 #16

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

1赞 Yosep Tito 6/25/2020 #17

试试这个CSS，它对我有用

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

0赞 ysf 6/25/2020

虽然此代码可以解决 OP 的问题，但最好包含有关您的代码如何解决 OP 问题的解释。通过这种方式，未来的访问者可以从您的帖子中学习，并将其应用于他们自己的代码。SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能被点赞。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。

9赞 t_dom93 10/17/2020 #18

`: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

5赞 Gass 4/25/2021 #19

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

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

1赞 kkpareek 4/5/2022 #20

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

解决方案将是：

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

1赞 Paolo Resteghini 2/3/2023 #21

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

outline-color: transparent;

上一个：我可以隐藏 HTML5 数字输入的旋转框吗？

下一个：HTML Input=“file” 接受属性文件类型（CSV）

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

How to remove the border highlight on an input text element

评论

评论

评论

这是一个普遍关注的问题。

所以。。。大纲到底有什么用？

那么答案是什么呢？

评论

评论

评论

评论

:focus-visible

`:focus-visible`