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


How to remove the border highlight on an input text element

当一个HTML元素被"聚焦"(当前被选中/加上标签)时，许多浏览器(至少是Safari和Chrome)会在它周围加上蓝色边框。

对于我正在处理的布局，这很分散注意力，看起来不太合适。

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

火狐似乎不会这样做，或者至少会让我用以下方法控制它：

1
border: x;

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

让Safari去掉这一点闪光会很好。

在您的情况下，尝试：

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

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

1
2
3
4
5
6
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

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

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

尽管我不建议这样做，但为了完整起见，您可以禁用所有内容的焦点大纲：

1
2
3
*:focus {
    outline: none;
}

请记住，焦点大纲是一个可访问性和可用性特性；它提示用户当前关注的元素。

相关讨论

将其从所有输入中删除

1
2
3
input {
 outline:none;
}

这是一个旧线程，但为了参考，需要注意的是，不建议禁用输入元素的大纲，因为它会妨碍可访问性。

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

相关讨论

这是一个共同关心的问题。

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

如图所示：

1
2
3
4
5
6
7
8
form,
label {
  margin: 1em auto;
}

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

最常见的"修复"建议是outline:none，如果使用不正确，则会对可访问性造成灾难。

那么…大纲到底有什么用？

我发现了一个非常干练的网站，它能很好地解释一切。

It provides visual feedback for links that have"focus" when
navigating a web document using the TAB key (or equivalent). This is
especially useful for folks who can't use a mouse or have a visual
impairment. If you remove the outline you are making your site
inaccessible for these people.

好，让我们用上面同样的例子来试试，现在使用TAB键来导航。

1
2
3
4
5
6
7
8
form,
label {
  margin: 1em auto;
}

label {
  display: block;
}
1
2
3
4
<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。

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

1
2
3
4
5
6
7
8
9
10
11
12
form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}
1
2
3
4
<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>

你看怎么更难弄清楚焦点在哪里？唯一的标志是光标闪烁。我上面的例子过于简单化了。在实际情况下，页面上不会只有一个元素。更符合这一点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
  <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:
    <input type="text" name="firstname"> Last name:
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male
    <input type="radio" name="gender" value="female"> Female
    <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>

现在，如果我们保留大纲，将其与相同的模板进行比较：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
  <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:
    <input type="text" name="firstname"> Last name:
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male
    <input type="radio" name="gender" value="female"> Female
    <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>

因此，我们确定了以下内容

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

    • 那么答案是什么？

    去掉难看的轮廓，添加你自己的视觉提示来指示焦点。

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

    我删除了大纲，并添加了底部边框：focus和：active。我还删除了顶部、左侧和右侧的默认边框，方法是将它们设置为透明打开：焦点和：活动(个人偏好)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    form,
    label {
      margin: 1em auto;
    }

    label {
      display: block;
    }

    input {
      outline: none
    }

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .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
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
      <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:
        <input type="text" name="firstname"> Last name:
        <input type="text" name="lastname">
      </form>


      <form>
        <input type="radio" name="gender" value="male" checked> Male
        <input type="radio" name="gender" value="female"> Female
        <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>

    这可以通过使用建立在修改"大纲"的思想基础上的外部库来进一步扩展，而不是像物化一样完全删除它。

    你可以最终得到一些不难看的东西，只需很少的努力就可以工作。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    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;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />


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

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

    1
    2
    3
    4
    5
    6
    7
    8
    input:focus, input.form-control:focus {

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

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

    1
    2
    3
    *:focus {
    outline: none;
    }

    这将删除蓝色边框！

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

    希望它有帮助！

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

    因此，我发现的最佳折衷方案是，只有当我们检测到用户使用键盘导航时，才显示大纲样式。基本上，如果用户按tab键，我们会显示轮廓，如果他使用鼠标，我们会隐藏它们。

    它不会阻止您为某些元素编写自定义焦点样式，但至少它提供了一个良好的默认值。

    我就是这样做的：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    // 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);
    });
    1
    2
    3
    body:not(.keyboardUser) *:focus {
      outline: none;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    <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>
    This is anchor link
    <input type="checkbox" />
    <textarea>textarea</textarea>
    <select/>

    相关讨论

    使用此代码：

    1
    2
    3
    input:focus {
        outline: 0;
    }

    我试了所有的答案，但还是无法让我的手机工作，直到我找到了-webkit-tap-highlight-color。

    所以，对我有用的是…

    1
    * { -webkit-tap-highlight-color: transparent; }
    相关讨论

    你也可以试试这个

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

    或

    1
    2
    3
    .classname input{
    outline-style: none;
    }

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

    以下解决方案更改了Firefox的边框样式focus，并将其他浏览器的大纲设置为none。

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

    虚线边框(边框2px红色虚线)：Dashed border. border 2px dashed red

    没有边界！(边界0px)：No border. border:0px

    文本区域边框(边框1px纯灰色)：Textarea border. border 1px solid gray

    代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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;
    }
    1
    <textarea id="textarea">yo</textarea>

    使用：outline:none可以删除文本/输入框周围的橙色或蓝色边框(轮廓)。

    1
    2
    3
    4
    5
    6
    7
    8
    input {
        background-color: transparent;
        border: 0px solid;
        height: 20px;
        width: 160px;
        color: #CCC;
        outline:none !important;
    }

    当焦点位于元素上时，使用下面的css属性删除大纲：

    1
    2
    3
    input:focus {
        outline: 0;
    }

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

    1
    2
    3
    .className input:focus {
        outline: 0;
    }

    此属性删除所选元素的大纲。

    试试这个

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .form-group input {

      display: block;
      background: none;
      padding: 0.175rem 0.175rem 0.0875rem;
      font-size: 1.4rem;
      border-width: 0;
      border-color: transparent;
      line-height: 1.9;
      width: 100%;
      color: #ccc;
      transition: all 0.28s ease;
      box-shadow: none;

    }