如何消除边界上输入文件

Question

当HTML元素是'关注'(目前选定/标签进入)，许多浏览器(至少野生动物园和铬)将放在一个蓝色的边界周围。

为布局我的工作上，这是分散注意力，看起来并不正确的。

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

Firefox似乎不这样做，或者至少会让我控制：

border: x;

如果有人能告诉我怎么即执行，我会好奇的。

获得野生动物园删除这点的耀斑将是很好的。

Answer 1

在你的情况，请尝试：

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

或者在一般情况下，影响到所有基本形式元素：

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

---

在的意见，诺亚怀特摩尔建议服用本更进一步，以支持具有所述contenteditable属性设置为true元件（有效地使它们的输入类型元件的）。以下应针对那些以及（在CSS3能够浏览器）：

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

虽然我不会与此推荐它，为了完整起见，你总是可以禁用焦点轮廓上的所有

*:focus {
    outline: none;
}

请注意，焦点轮廓是一个访问性和可用性特征;它线索用户成什么元件目前被聚焦。

Answer 2

要从所有输入删除它

input {
 outline:none;
}

Answer 3

这是一个古老的线程，但参考的是要注意，禁用的输入元素的轮廓不推荐，因为它阻碍了可访问性是非常重要的。

概要属性是有原因的 - 为用户提供键盘焦点的清楚指示。有关此主题的进一步的阅读和其他来源见 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 关键。

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. 去除他们使生活更加困难。

---

所以答案是什么?

除丑陋的纲要，并添加自己的视线索表明的焦点。

这是一个非常简单的例子是什么意思。

我删除了概述，并添加一个底部的边界 :焦点 和 ：活动.我还删除默认的边界上，左右两边设置透明上 :焦点 和 ：活动 (个人的偏好)

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>

这可以扩展进一步通过使用外部图书馆建立在这个想法的修改"的大纲"，反对删除，它完全喜欢 实现

你可以结束了东西是不是丑陋的，并与非常小的努力

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:focus, input.form-control:focus {

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

Answer 6

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

*:focus {
outline: none;
}

这将删除蓝色边框！

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

希望它能帮助！

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