如何去除输入文本框元素的边框高亮显示

Question

当一个HTML元素'focused'(当前选中/切换到)时，许多浏览器(至少Safari和Chrome)会在其周围放置一个蓝色边框。

对于我正在处理的布局，这很分散注意力且不美观。

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

火狐浏览器似乎不会这样做，或者至少，它会让我用以下方式来控制它:

border: x;

如果有人能告诉我IE的表现，我会很感兴趣。

让Safari移除这个小细节会很不错。

- user170579

Answer 1

在你这样做之前，请记住，焦点轮廓是一种辅助功能和可用性功能；它提示用户当前聚焦的元素，并且很多用户依赖它。你需要找到其他方法来使焦点可见。

在你的情况下，尝试：

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

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

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

---

在评论中，Noah Whitmore 建议进一步支持那些设置了 contenteditable 属性为 true 的元素（实际上使它们成为一种输入元素）。以下代码也应该针对这些元素（在支持 CSS3 的浏览器中）：

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

虽然我不建议这样做，但为了完整起见，您始终可以使用以下内容禁用所有元素的焦点轮廓：

*:focus {
    outline: none;
}

- Cᴏʀʏ

---

谢谢 Cory，非常有用的提示。您还需要将 CSS 分配给 textarea 以覆盖所有输入字段。 input:focus, textarea:focus {outline: none;} - BaronGrivet

请勿忘记选中后也要加上 select:focus {outline:none;}。这段代码的意思是去掉选择框选中时的外边框。 - Geek Num 88

还有<button>标签，它被jQuery UI和Twitter Bootstrap等工具使用，因此为了完整性，我会将button: focus添加到列表中。 - Chris Parton

根据我的经验，这种情况可能发生在没有焦点的情况下，此时我必须将其应用于button, button:focus { outline:none; }。 - Mike Lyons

@Cᴏʀʏ，您介意将关于a11y和可用性方面的说明移动到问题的最顶部吗？我认为这样做会极大地改善您的答案，因为删除a11y功能是一种不好的做法。 - Josef Engelfrost

Answer 2

从所有输入中删除它。

input {
 outline:none;
}

- marcjae

Answer 3

这让我困惑了一段时间，直到我发现这条线既不是边框也不是轮廓，而是一个阴影。因此，要删除它，我必须使用以下代码：

这让我困扰了一段时间，直到我发现该线既不是边框也不是轮廓，而是一个阴影。因此，要将其删除，我必须使用以下代码：

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

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

- Rikard Askelöf

---

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

Answer 4

这是一个旧的主题，但为了参考，重要的是要注意禁用输入元素的轮廓线不推荐，因为它会影响可访问性。

轮廓线属性存在的原因是为了向用户清晰地指示键盘焦点。有关此主题的进一步阅读和其他来源，请参见http://outlinenone.com/

- Boaz

---

Boaz，FYI input.middle{outline: none}仍然允许您遍历元素（包括input.middle）。按Tab键也会将焦点放在输入标记上。唯一的问题是您无法看到它的焦点（轮廓焦点）。因此，使用它并不那么有害.. : ) - Anish Nair

“唯一的问题是您将无法看到它的焦点（轮廓焦点）” - 这正是我的观点。移除轮廓使焦点事件的视觉提示失效，而不是实际事件。移除视觉提示意味着您正在增加残疾人士依赖该提示的难度。 - Boaz

有时候为了达成目标，我们需要做出妥协：) - Anish Nair

@AnishNair 是的。但是，阅读此线程的人往往更喜欢采用简单的方法（例如outline:none;），而不考虑其影响。仅仅因为某些事情容易且节省时间，并不意味着它是最佳实践 :) - Boaz

我来晚了，但你仍然可以为输入框设置聚焦状态的样式（例如更改边框颜色或宽度）。只要在此过程中考虑到无障碍性方面的问题（良好的对比度等），它就和默认的轮廓一样易于访问。 - Meg

Answer 5

这是一个常见的问题。

浏览器默认渲染的轮廓线非常难看。

例如，可以看到以下内容：

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，然而如果使用不当，这对于辅助功能来说就是灾难性的。

---

所以... outline 究竟有什么用处呢？

我找到了一家非常详细的网站（outlinenone.com），它解释得非常清楚。

在使用TAB键（或等效方式）导航网页文档时，为具有“焦点”的链接提供视觉反馈。这对于不能使用鼠标或视力受损的人尤其有用。如果您删除了outline，则使您的网站无法访问这些人。

好吧，让我们尝试同样的示例，现在使用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. 去除轮廓线会使生活更加困难。

---

那么答案是什么呢？

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

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

我删除了轮廓线，并在：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>

- I haz kode

Answer 6

对我而言唯一有效的解决方案

这个边框实际上是一个阴影。所以我需要这样做来隐藏它：

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

- Ali Al Amine

Answer 7

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

- Tom Esterez

---

这是一种彻底的方法。click监听器是一个不错的点睛之笔。 - Keith DC

Answer 8

: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/zh-CN/docs/Web/CSS/:focus-visible

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

- t_dom93

Answer 9

我尝试了所有的答案，但在 移动设备 上仍然无法使其工作，直到我找到了-webkit-tap-highlight-color。

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

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

- Oneezy

---

这就是我一直在寻找的解决方案。当你使用像li这样的元素进行触摸屏体验时，这尤其有用。 - Anand G

Answer 10

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

*:focus {
    outline: none;
}

这是一个可运行的例子

- 1010