首页 文章

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

提问于
浏览 次
484

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

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

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

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

border: x;

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

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

css input safari webkit border

14 回答

  • 914

    在您的情况下，尝试：

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

    虽然我不会这样做，但你可以随时禁用 everything 上的焦点轮廓：

    *:focus {
    outline: none;
}

    请记住，焦点大纲是可访问性和可用性功能;它告诉用户当前关注的元素 .

    回复于
  • 20

    从所有输入中删除它

    input {
 outline:none;
}
    回复于
  • 5

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

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

    回复于
  • 53

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

    浏览器呈现的默认outline是丑陋的 .

    看到这个例子：

    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>

    最常见的"fix"最推荐的是 outline:none - 如果使用不正确 - 是可访问性的灾难 .

    那么......大纲的用途是什么？

    有一个very dry-cut website我发现它解释了一切 .

    它为使用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>

    请注意如何在不单击输入的情况下确定焦点的位置？

    现在，让我们在我们可靠的 <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>

    所以我们 Build 了以下内容

    • 轮廓很难看

    • 删除它们会让生活变得更加困难 .

    那么答案是什么？

    Remove the ugly outline and add your own visual cues to indicate focus.

    这是我的意思的一个非常简单的例子 .

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

    这可以通过使用基于修改"outline"的想法的外部库进一步扩展，而不是像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>
    回复于
  • 1

    使用此代码：

    input:focus {
    outline: 0;
}
    回复于
  • 0

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

    *:focus {
outline: none;
}

    这将删除蓝色边框！

    这是一个有效的例子：JSfiddle.net

    希望能帮助到你！

    回复于
  • 2

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

    因此，我发现的最佳折衷方案是仅在我们检测到用户正在使用键盘进行导航时才显示轮廓样式 . 基本上，如果用户按下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/>
    回复于
  • 3

    你也可以尝试一下

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

    要么

    .classname input{
outline-style: none;
}
    回复于
  • 2

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

    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

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

    input:focus {
    outline: 0;
}

    这个CSS属性删除了焦点上所有输入字段的轮廓或使用伪类来使用CSS属性下方删除元素的轮廓 .

    .className input:focus {
    outline: 0;
}

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

    回复于
  • 5

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

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

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

    那么，对我有用的是......

    * { -webkit-tap-highlight-color: transparent; }
    回复于
  • 9

    试试这个吧

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

}
    回复于
  • 1

    在Firefox中，没有一个解决方案适合我 .

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

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

    虚线边框（边框2px红色虚线）：
    Dashed border. border 2px dashed red

    无边界！ （border 0px）：

    No border. border:0px

    Textarea边界（边框1px纯灰色）：
    Textarea border. border 1px solid gray

    这是代码：

    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>
    回复于

相关问题