CSS 如何删除输入文本元素上的边框突出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1457849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the border highlight on an input text element
提问by user170579
When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it.
当一个 HTML 元素被“聚焦”（当前被选中/标签进入）时，许多浏览器（至少 Safari 和 Chrome）会在它周围放置一个蓝色边框。
For the layout I am working on, this is distracting and does not look right.
对于我正在处理的布局，这会分散注意力并且看起来不正确。
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox does not seem to do this, or at least, will let me control it with:
Firefox 似乎没有这样做，或者至少会让我控制它：
border: x;
If someone can tell me how IE performs, I would be curious.
如果有人能告诉我 IE 的性能如何，我会很好奇。
Getting Safari to remove this little bit of flare would be nice.
让 Safari 消除这一点耀斑会很好。
回答by C???
In your case, try:
在您的情况下，请尝试：
input.middle:focus {
outline-width: 0;
}
Or in general, to affect all basic form elements:
或者一般来说，要影响所有基本表单元素：
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
In the comments, Noah Whitmoresuggested taking this even further to support elements that have the contenteditableattribute set to true(effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):
在评论中，Noah Whitmore建议进一步支持将contenteditable属性设置为 的元素true（有效地使它们成为一种输入元素）。以下内容也应该针对那些（在支持 CSS3 的浏览器中）：
[contenteditable="true"]:focus {
outline: none;
}
Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everythingwith this:
尽管我不推荐它，但为了完整起见，您始终可以通过以下方式禁用所有内容的焦点大纲：
*: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.
请记住，焦点大纲是一项可访问性和可用性功能；它会提示用户当前关注的是什么元素。
回答by marcjae
To remove it from all inputs
从所有输入中删除它
input {
outline:none;
}
回答by Boaz - Reinstate Monica
This is an old thread, but for reference it's important to note that disabling an input element's outline is not recommended as it hinders accessibility.
这是一个旧线程，但作为参考，重要的是要注意不建议禁用输入元素的轮廓，因为它会妨碍可访问性。
The outline property is there for a reason - providing users with a clear indication of keyboard focus. For further reading and additional sources about this subject see http://outlinenone.com/
大纲属性的存在是有原因的 - 为用户提供键盘焦点的清晰指示。有关此主题的进一步阅读和其他来源，请参阅http://outlinenone.com/
回答by I haz kode
This is a common concern.
这是一个普遍的担忧。
The default outlinethat browsers render is ugly.
浏览器呈现的默认轮廓很难看。
See this for example:
例如，请参阅此内容：
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>The most common "fix" that most recommend is outline:none- which if used incorrectly - is disaster for accessibility.
最推荐的最常见的“修复”是outline:none——如果使用不当——对可访问性来说是灾难。
So...of what use is the outline anyway?
那么……轮廓有什么用呢？
There's a very dry-cut websiteI found which explains everything well.
我找到了一个非常干切的网站，它很好地解释了一切。
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 键（或等效键）导航 Web 文档时，它为具有“焦点”的链接提供视觉反馈。这对于不能使用鼠标或有视力障碍的人特别有用。如果您删除大纲，您将使这些人无法访问您的网站。
Ok, let's try it out same example as above, now use the TABkey to navigate.
好的，让我们尝试一下与上面相同的示例，现在使用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>Notice how you can tell where the focus is even without clicking the input?
请注意如何即使不单击输入也能知道焦点在哪里？
Now, let's try outline:noneon our trusty <input>
现在，让我们试试outline:none我们的可信赖<input>
So, once again, use the TABkey to navigate after clicking the text and see what happens.
因此，再一次，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>See how it's more difficult to figure out where the focus is? The only telling sign is the cursor blinking. My example above is overly simplistic. In real-world situations, you wouldn't have only one element on the page. Something more along the lines of this.
看看如何更难找出焦点在哪里？唯一的标志是光标闪烁。我上面的例子过于简单。在实际情况下，页面上不会只有一个元素。更多类似的东西。
.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>Now compare that to the same template if we keep the outline:
如果我们保留大纲，现在将其与相同的模板进行比较：
.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>So we have established the following
所以我们建立了以下
- Outlines are ugly
- Removing them makes life more difficult.
- 轮廓很丑
- 移除它们会使生活变得更加困难。
So what's the answer?
那么答案是什么？
Remove the ugly outline and add your own visual cues to indicate focus.
删除丑陋的轮廓并添加您自己的视觉提示以指示焦点。
Here's a very simple example of what I mean.
这是我的意思的一个非常简单的例子。
I remove the outline and add a bottom border on :focusand :active. I also remove the default borders on the top, left and right sides by setting them to transparent on :focusand :active(personal preference)
我删除了轮廓并在: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>So, we try the approach above with our "real-world" example from earlier:
因此，我们使用前面的“真实世界”示例尝试上述方法：
.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>This can be extended further by using external libraries that build on the idea of modifying the "outline" as opposed to removing it entirely like Materialize
这可以通过使用外部库进一步扩展，这些库基于修改“大纲”的想法，而不是像Materialize那样完全删除它
You can end up with something that is not ugly and works with very little effort
你最终可以得到一些不难看的东西，而且只需很少的努力
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>回答by Rikard Askel?f
This was confusing me for some time until I discovered the line was neither a border or an outline, it was a shadow. So to remove it I had to use this:
这让我困惑了一段时间，直到我发现这条线既不是边框也不是轮廓，而是阴影。所以要删除它，我不得不使用这个：
input:focus, input.form-control:focus {
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
回答by 1010
You could use CSS to disable that! This is the code I use for disabling the blue border:
你可以使用 CSS 来禁用它！这是我用于禁用蓝色边框的代码：
*:focus {
outline: none;
}
This will remove the blue border!
这将删除蓝色边框！
This is a working example: JSfiddle.net
这是一个工作示例：JSfiddle.net
Hope it helps!
希望能帮助到你！
回答by Tom Esterez
Removing all focus styles is bad for accessibility and keyboard users in general. But outlines are ugly and providing a custom focussed style for every single interactive element can be a real pain.
删除所有焦点样式通常对可访问性和键盘用户不利。但是轮廓很难看，为每个交互式元素提供自定义的聚焦样式可能是一个真正的痛苦。
So the best compromise I've found is to show the outline styles only when we detect that the user is using the keyboard to navigate. Basically, if the user presses TAB, we show the outlines and if he uses the mouse, we hide them.
所以我找到的最好的折衷办法是仅当我们检测到用户正在使用键盘进行导航时才显示轮廓样式。基本上，如果用户按下 TAB，我们会显示轮廓，如果他使用鼠标，我们会隐藏它们。
It does not stop you from writing custom focus styles for some elements but at least it provides a good default.
它不会阻止您为某些元素编写自定义焦点样式，但至少它提供了一个很好的默认值。
This is how I do it:
这就是我的做法：
// 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/>回答by Oneezy
I tried all the answers and I still couldn't get mine to work on Mobile, until I found -webkit-tap-highlight-color.
我尝试了所有的答案，但我仍然无法让我的在Mobile上工作，直到我找到-webkit-tap-highlight-color.
So, what worked for me is...
所以，对我有用的是......
* { -webkit-tap-highlight-color: transparent; }
回答by Ali Al Amine
The only solutiion that worked with me
与我合作的唯一解决方案
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);
}
回答by Touhid Rahman
Use this code:
使用此代码：
input:focus {
outline: 0;
}
