CSS 移除 Safari/Chrome textinput/textarea 发光
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/935559/
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
Remove Safari/Chrome textinput/textarea glow
提问by Alec Smart
I am wondering if its possible to remove the default blue and yellow glow when I click on a text input / text area using CSS?
我想知道当我使用 CSS 单击文本输入/文本区域时是否可以删除默认的蓝色和黄色发光？
回答by ajm
textarea, select, input, button { outline: none; }
Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.
尽管如此，有人认为保持发光/轮廓实际上有利于可访问性，因为它可以帮助用户查看当前关注哪个元素。
You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.
您还可以使用伪元素 ':focus' 仅在用户选择输入时定位输入。
回答by Carl W
This effect can occur on non-input elements, too. I've found the following works as a more general solution
这种效果也可能发生在非输入元素上。我发现以下工作作为更通用的解决方案
:focus {
outline-color: transparent;
outline-style: none;
}
Update:You may not have to use the :focusselector. If you have an element, say <div id="mydiv">stuff</div>, and you were getting the outer glow on this div element, just apply like normal:
更新：您可能不必使用:focus选择器。如果你有一个元素，比如说<div id="mydiv">stuff</div>，你在这个 div 元素上获得了外发光，就像平常一样应用：
#mydiv {
outline-color: transparent;
outline-style: none;
}
回答by Thomas Maas
On textarea resizing in webkit based browsers:
在基于 webkit 的浏览器中调整 textarea 的大小：
Setting max-height and max-width on the textarea will not remove the visual resize handle. Try:
在 textarea 上设置 max-height 和 max-width 不会删除视觉调整大小手柄。尝试：
resize: none;
(and yes I agree with "try to avoid doing anything which breaks the user's expectation", but sometimes it does make sense, i.e. in the context of a web application)
（是的，我同意“尽量避免做任何违背用户期望的事情”，但有时确实有意义，即在 Web 应用程序的上下文中）
To customize the look and feel of webkit form elements from scratch:
从头开始自定义 webkit 表单元素的外观和感觉：
-webkit-appearance: none;
回答by MineCMD
卡尔·W：
This effect can occur on non-input elements, too. I've found the following works as a more general solution
:focus { outline-color: transparent; outline-style: none; }
这种效果也可能发生在非输入元素上。我发现以下工作作为更通用的解决方案
:focus { outline-color: transparent; outline-style: none; }
I'll explain this:
我来解释一下：
:focusmeans it styles the elements that are in focus. So we are styling the elements in focus.outline-color: transparent;means that the blue glow is transparent.outline-style: none;does the same thing.
:focus意味着它为焦点中的元素设置样式。因此，我们正在为重点元素设置样式。outline-color: transparent;表示蓝色光晕是透明的。outline-style: none;做同样的事情。
回答by Michael
I experienced this on a divthat had a click event and after 20 some searches I found this snippet that saved my day.
我在一个div有点击事件的网站上遇到过这种情况，经过 20 次搜索后，我发现这个片段拯救了我的一天。
-webkit-tap-highlight-color: rgba(0,0,0,0);
This disables the default button highlighting in webkit mobile browsers
这将禁用 webkit 移动浏览器中的默认按钮突出显示
回答by Wim Mostmans
This is the solution for people that do care about accessibility.
这是为关心可访问性的人提供的解决方案。
Please, don't use outline:none;for disabling the focus outline. You are killing accessibility of the web if you do this. There is a accessible way of doing this.
请不要outline:none;用于禁用焦点轮廓。如果你这样做，你就是在扼杀网络的可访问性。有一种可行的方法可以做到这一点。
Check out this articlethat I've written to explain how to remove the border in an accessible way.
查看我写的这篇文章，以解释如何以可访问的方式删除边框。
The idea in short is to only show the outline border when we detect a keyboard user. Once a user starts using his mouse we disable the outline. As a result you get the best of the two.
简而言之，这个想法是在我们检测到键盘用户时只显示轮廓边框。一旦用户开始使用他的鼠标，我们就会禁用轮廓。因此，您可以获得两者中最好的。
回答by HarsH
This solution worked for me.
这个解决方案对我有用。
input:focus {
outline: none !important;
box-shadow: none !important;
}
回答by Kyle S
If you want to remove the glow from buttons in Bootstrap (which is not necessarily bad UX in my opinion), you'll need the following code:
如果您想从 Bootstrap 中的按钮中去除发光（在我看来这不一定是糟糕的 UX），您需要以下代码：
.btn:focus, .btn:active:focus, .btn.active:focus{
outline-color: transparent;
outline-style: none;
}
回答by vamsikrishnamannem
some times it's happens buttons also then use below to remove the outerline
有时它也会发生按钮然后使用下面的删除外线
input:hover
input:active,
input:focus,
textarea:active,
textarea:hover,
textarea:focus,
button:focus,
button:active,
button:hover
{
outline:0px !important;
}
回答by Martyn Shutt
I just needed to remove this effect from my text input fields, and I couldn't get the other techniques to work quite right, but this is what works for me;
我只需要从我的文本输入字段中删除这种效果，我无法让其他技术完全正确地工作，但这对我有用；
input[type="text"], input[type="text"]:focus{
outline: 0;
border:none;
box-shadow:none;
}
Tested in Firefox and in Chrome.
在 Firefox 和 Chrome 中测试。
