Html 单击时按钮周围出现不需要的轮廓或边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4524180/
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
Unwanted outline or border around button when clicked
提问by Web_Designer
I have a styled button on my website. But when I click it, it creates an unwanted border or outline (I don't know which). How can I remove that border? Below is all the code that pertains to the button.
我的网站上有一个样式按钮。但是当我点击它时，它会创建一个不需要的边框或轮廓（我不知道是哪个）。我怎样才能删除那个边框？以下是与按钮相关的所有代码。
button {
border: hidden;
cursor: pointer;
outline: none;
}<button>this is my button</button>采纳答案by cesarsalazar
If you are talking about the dotted line in Firefox, I think what you're looking for is this:
如果您在谈论 Firefox 中的虚线，我认为您正在寻找的是：
button::-moz-focus-inner { border: 0; }
This is a thread on the topic: How to remove Firefox's dotted outline on BUTTONS as well as links?
这是关于该主题的线程：如何删除 Firefox 在按钮和链接上的虚线轮廓？
回答by VIP
Use either of these CSS Styles
使用这些 CSS 样式之一
a:active,
a:focus,
input,
input:active,
input:focus {
outline: 0;
outline-style:none;
outline-width:0;
}
a:active,
a:focus,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
OR
或者
:focus {outline:none;} ::-moz-focus-inner {border:0;}
Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.
完成 CSS 样式部分后，您可能还需要设置 IE-Emulator。更新您的 Web 应用程序 web.config 文件并包含以下键。
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
</customHeaders>
</httpProtocol>
</system.webServer>
回答by Reji kumar
outline: none;
This worked for me in Chrome.
这在 Chrome 中对我有用。
回答by Peter
Please don't remove the outlines on focus-styles, this makes your site less accessible to your keyboard-only and low-vision users.
请不要删除焦点样式上的轮廓，这会使仅使用键盘和视力不佳的用户无法访问您的网站。
If you choose to add something like :focus { outline: none; }to your stylesheets, also add you owns styles for focused elements.
如果您选择向:focus { outline: none; }样式表添加类似的内容，请同时为重点元素添加您拥有的样式。
Reading: Never remove CSS outlines
回答by Aakash Choubey
It's an outline.
Use outline:none;on :focus pseudo-class to remove it.
Worked well for me.
是大纲。使用outline:none;:focus 伪类将其删除。对我来说效果很好。
