CSS 如何从输入按钮中删除轮廓边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19886843/
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 Outline Border From Input Button
提问by Cindy Turlington
when click somewhere else the border disappears, tried onfocus none, but didn't help, how to make ugly button border disappear when click on?
当单击其他地方边框消失时，尝试 onfocus none，但没有帮助，如何在单击时使丑陋的按钮边框消失？
input[type="button"] {
width: 120px;
height: 60px;
margin-left: 35px;
display: block;
background-color: gray;
color: white;
border: none;
}<input type="button" value="Example Button">回答by Ankit Agrawal
using outline:none;we can remove that border in chrome
使用大纲：无；我们可以在 chrome 中删除那个边框
<style>
input[type="button"]
{
width:120px;
height:60px;
margin-left:35px;
display:block;
background-color:gray;
color:white;
border: none;
outline:none;
}
</style>
回答by Roko C. Buljan
Focus outlines in Chrome and FF
Chrome 和 FF 中的焦点轮廓
removed:
移除：
input[type="button"]{
outline:none;
}
input[type="button"]::-moz-focus-inner {
border: 0;
}
Accessibility (A11Y)
辅助功能 (A11Y)
/* Don't forget! User accessibility is important */
input[type="button"]:focus {
/* your custom focused styles here */
}
回答by X-Coder
It works for me simply :)
它对我很简单:)
*:focus {
outline: 0 !important;
}
回答by mnis.p
This one worked for me
这个对我有用
button:focus {
border: none;
outline: none;
}
回答by henrywright
The outlineproperty is what you need. It's shorthand for setting each of the following properties in a single declaration:
该outline属性是你所需要的。它是在单个声明中设置以下每个属性的简写：
outline-styleoutline-widthoutline-color
outline-styleoutline-widthoutline-color
You could use outline: none;, which is suggested in the accepted answer. You could also be more specific if you wanted:
您可以使用outline: none;，这是在接受的答案中建议的。如果您愿意，您也可以更具体：
button {
outline-style: none;
}
回答by user11173874
button:focus{outline:none !important;}
add !importantif it is used in Bootstrap
!important如果在Bootstrap 中使用，则添加
回答by A.Peralta
To avoid the problem caused when you change the outline property on a focus, is tho give a visual effect when the user Tab on the input button or click on it.
为了避免在更改焦点上的轮廓属性时导致的问题，是否在用户 Tab 上输入按钮或单击它时提供视觉效果。
In this case is a submit type, but you can apply to a type="button" too.
在这种情况下是提交类型，但您也可以应用到 type="button" 。
input[type="submit"]:focus {
outline: none !important;
background-color: rgb(208, 192, 74);
}回答by asith
Removing nessorry accessible event not a good idea in up to standard web developments. either way if you looking for a solution removing just the outline doesn't solve the problem. you also have to remove the blue color shadow. for specific scenarios use a separate class name to isolate the this special style to your button.
在标准的 Web 开发中，删除 nessorry 可访问事件不是一个好主意。无论哪种方式，如果您正在寻找仅删除轮廓的解决方案并不能解决问题。您还必须删除蓝色阴影。对于特定场景，请使用单独的类名将这种特殊样式与您的按钮隔离开来。
.btn.focus, .btn:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
Better do this
最好这样做
.remove-border.focus, .remove-border:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
回答by Gourav
It's greatly simple than you think. When the button is focussed, apply the outlineproperty, like this:
这比你想象的要简单得多。当按钮获得焦点时，应用该outline属性，如下所示：
button:focus {
outline: 0 !important;
}
But when I use nonevalue, it doesn't work for me.
但是当我none使用价值时，它对我不起作用。
回答by martinedwards
Removing the outline is an accessibility nightmare. People tabbing using keyboards will never know what item they're on.
删除轮廓是可访问性的噩梦。使用键盘敲击的人永远不会知道他们在什么项目上。
Best to leave it, as most clicked buttons will take you somewhere anyway, or if you HAVE to remove the outline then isolate it a specific class name.
最好留下它，因为大多数点击的按钮无论如何都会带你去某个地方，或者如果你必须删除大纲，然后将它隔离一个特定的类名。
.no-outline {
outline: none;
}
Then you can apply that class whenever you need to.
然后，您可以在需要时应用该课程。
