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

Question

当一个html元素被"聚焦"(当前被选中/选中)时,许多浏览器(至少是Safari和Chrome)会在它周围放置一个蓝色边框.

对于我正在进行的布局,这会分散注意力并且看起来不正确.

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

FireFox似乎没有这样做,或者至少,让我控制它

border: x;

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

但让Safari删除这一点点耀斑会很不错.

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

请记住,焦点大纲是可访问性和可用性功能; 它可以让用户了解当前关注的元素.

Answer 2

从所有输入中删除它

input {
 outline:none;
}

Answer 3

这是一个旧线程,但是为了参考,重要的是要注意禁止禁用输入元素的轮廓,因为它阻碍了可访问性.

outline属性有一个原因 - 为用户提供键盘焦点的清晰指示.有关此主题的进一步阅读和其他资料,请访问http://outlinenone.com/

Answer 4

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

浏览器呈现的默认大纲很难看.

看到这个例子:

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>

所以我们建立了以下内容

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>

这可以通过使用外部库进一步扩展,这些库建立在修改"大纲"的想法上,而不是像Materialise那样完全删除它

你可以得到一些不丑的东西,并且只需很少的努力

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>

Answer 5

唯一对我有用的解决方案

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

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

Answer 6

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

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

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

Answer 7

删除所有焦点样式通常对可访问性和键盘用户不利。但是轮廓很难看，为每个交互式元素提供自定义的聚焦样式可能是一个真正的痛苦。

所以我找到的最好的折衷办法是仅当我们检测到用户正在使用键盘进行导航时才显示轮廓样式。基本上，如果用户按下 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/>

Answer 8

我尝试了所有的答案，但我仍然无法让我的在Mobile上工作，直到我找到-webkit-tap-highlight-color.

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

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

Answer 9

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

*:focus {
    outline: none;
}

这是一个工作示例

Answer 10

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

Answer 11

2020 年更新 - :focus-visible

可访问性方面的好消息 - Chrome 和 Firefox 刚刚添加了对 :focus-visible.

由于可访问性要求（键盘导航），隐藏焦点样式是不好的做法，这会使您的网站难以访问。

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

:focus-visible /* Chrome */

请注意，Firefox 通过旧的、带前缀的伪类支持类似的功能：

:-moz-focusring /* Firefox */

:focus-visible /* Chrome */

:-moz-focusring /* Firefox */

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

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

Answer 12

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

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