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

CSS

乐米亚

2020-03-17

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

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

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

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

border: x;

如果有人可以告诉我IE的性能，我会很好奇。

使Safari消除这点眩光会很好。

第1899篇《如何删除输入文本元素上的边框突出显示》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共14个回答
StafanJim 2020.03.17

与我合作的唯一解决方案

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);
 }
猪猪Green 2020.03.17

当焦点位于元素上时，使用以下CSS属性删除轮廓：

input:focus {
    outline: 0;
}

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

.className input:focus {
    outline: 0;
}

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

米亚伽罗L 2020.03.17

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

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}
十三泡芙猿 2020.03.17

尝试这个

*:focus {
    outline: none;
}

这会影响您的整个页面

樱泡芙小哥 2020.03.17

您也可以尝试

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

要么

.classname input{
outline-style: none;
}
樱小胖Mandy 2020.03.17

在Firefox中，所有解决方案都不适合我。

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

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

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

无边界！（边界为0px）：
无边界。 边框：0px

Textarea边框（边框1px纯灰色）： Textarea边框。 边框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>

小哥小宇宙 2020.03.17

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

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

* { -webkit-tap-highlight-color: transparent; }
蛋蛋古一 2020.03.17

使用此代码：

input:focus {
    outline: 0;
}
古一斯丁 2020.03.17

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

*:focus {
outline: none;
}

这将删除蓝色边框！

这是一个工作示例：JSfiddle.net

希望能帮助到你！

小卤蛋猿阿飞 2020.03.17

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

浏览器呈现的默认轮廓很难看。

例如：

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>

可以通过使用外部库来进一步扩展该库，该库基于修改“大纲”的思想，而不是像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>

Harry乐Harry 2020.03.17

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

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

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
村村路易 2020.03.17

对于您的情况，请尝试：

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

Keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused.

樱伽罗 2020.03.17

从所有输入中删除

input {
 outline:none;
}
A逆天猿 2020.03.17

这是一个旧线程，但是作为参考，必须注意，不建议禁用输入元素的轮廓，因为这会妨碍可访问性。

那里的outline属性是有原因的-为用户提供键盘焦点的清晰指示。有关此主题的更多信息和其他资源，请访问http://outlinenone.com/

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android