当我点击其他地方时，边框消失了，我尝试使用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">【问题讨论】：
Chrome 和 FF 中的焦点轮廓：
移除了按钮焦点轮廓：
input[type=button] {
outline:none;
}
input[type=button]::-moz-focus-inner {
border: 0;
}
/*
Accessibility (A11Y)
Don't forget! User accessibility is important
*/
input[type=button]:focus {
/* your custom focused styles here */
}
【讨论】：
为了避免当你改变焦点上的outline属性时引起的问题，是当用户在输入按钮上Tab或点击它时给予视觉效果。
在这种情况下是提交类型，但您也可以应用到 type="button"。
input[type=submit]:focus {
outline: none !important;
background-color: rgb(208, 192, 74);
}【讨论】：
将按钮的outline 和box-shadow 属性设置为none 并使它们重要。
input[type=button] {
outline: none !important;
box-shadow: none !important;
}
【讨论】：
box-shadow 在 Edge 上为我工作，很好 :)
使用 outline: none; 您可以在 chrome 中删除该边框。
<style>
input[type=button] {
width: 120px;
height: 60px;
margin-left: 35px;
display: block;
background-color: gray;
color: white;
border: none;
outline: none;
}
</style>
【讨论】：
outline: none; 规则添加到 input[type="button"]:focus 而不是 input[type="button"]。
由于 Chrome 和 Mozilla 不仅在按钮周围而且在链接文本周围添加了这一行，所以我在我的网站上使用：
a:focus {outline: none;
}
适用于浏览器、链接和按钮。
顺便说一句，这没有（27.4.2021）：
input[type=button]{
outline:none;
}
input[type=button]::-moz-focus-inner {
border: 0;
}
【讨论】：
注意outline: none 可以同时应用于<button> 标签和input[type=button] 以删除浏览器应用的点击边框。
【讨论】：
使用键盘恢复轮廓的另一种方法是使用:focus-visible。但是，这在 IE 上不起作用：https://caniuse.com/?search=focus-visible。
【讨论】：
在标准的 Web 开发中删除 nessorry 可访问事件不是一个好主意。 无论哪种方式，如果您正在寻找仅删除轮廓的解决方案并不能解决问题。您还必须删除蓝色阴影。对于特定场景，请使用单独的类名将这种特殊样式隔离到您的按钮。
.btn.focus, .btn:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
最好这样做
.remove-border.focus, .remove-border:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
【讨论】：
button:focus{outline:none !important;}
如果在Bootstrap中使用，则添加!important
【讨论】：
tried onfocus none, but didn't help。
这比你想象的要简单得多。当按钮获得焦点时，应用outline 属性，如下所示：
button:focus {
outline: 0 !important;
}
但是当我使用none 值时，它对我不起作用。
【讨论】：
正如许多其他人所提到的，selector:focus {outline: none;} 将删除该边框但该边框是一个关键的辅助功能，允许键盘用户找到按钮，不应该 被删除。
由于您的关注点似乎是审美问题，您应该知道您可以更改轮廓的颜色、样式和宽度，使其更适合您的网站样式。
selector:focus {
outline-width: 1px;
outline-style: dashed;
outline-color: red;
}
速记：
selector:focus {
outline: 1px dashed red;
}
【讨论】：
给定下面的html：
<button class="btn-without-border"> Submit </button>
在 css 样式中执行以下操作：
.btn-without-border:focus {
border: none;
outline: none;
}
此代码将删除按钮边框并在单击按钮时禁用按钮边框焦点。
【讨论】：
这个对我有用
button:focus {
border: none;
outline: none;
}
【讨论】：
删除轮廓是可访问性的噩梦。使用键盘切换的人永远不会知道他们在哪个项目上。
最好留下它，因为大多数点击的按钮无论如何都会带你到某个地方，或者如果你必须删除大纲，然后将它隔离为一个特定的类名。
.no-outline {
outline: none;
}
然后，您可以在需要时应用该类。
【讨论】：
outline 属性是您所需要的。它是在单个声明中设置以下每个属性的简写：
outline-styleoutline-widthoutline-color您可以使用outline: none;，这是在接受的答案中建议的。如果你愿意，你也可以更具体：
button {
outline-style: none;
}
【讨论】：
它对我来说很简单:)
*:focus {
outline: 0 !important;
}
【讨论】：