当我点击其他地方的边界消失，我试图使用onfocus: none，但这没有帮助。如何使这个丑陋的按钮边界消失时，我点击它?
输入(type =按钮){ 宽度:120 px; 高度:60 px; margin-left: 35 px; 显示:块; 背景颜色:灰色; 颜色:白色; 边界:没有; ｝ <input type="button" value="Example button" >
当前回答
在使用键盘时，另一种恢复轮廓的方法是使用:focus-visible。但是，这在IE:https://caniuse.com/?search=focus-visible上不起作用。
其他回答
在使用键盘时，另一种恢复轮廓的方法是使用:focus-visible。但是，这在IE:https://caniuse.com/?search=focus-visible上不起作用。
使用outline: none;你可以在铬中删除边界。
<style>
input[type=button] {
width: 120px;
height: 60px;
margin-left: 35px;
display: block;
background-color: gray;
color: white;
border: none;
outline: none;
}
</style>
由于Chrome和Mozilla不仅在按钮周围添加了这一行，而且在链接文本周围也添加了这一行，我在我的网站上使用这个:
a:focus {outline: none;
}
适用于浏览器、链接和按钮。
顺便说一句，这并没有(27.4.2021):
input[type=button]{
outline:none;
}
input[type=button]::-moz-focus-inner {
border: 0;
}
这比你想象的要简单得多。当按钮被聚焦时，应用outline属性，如下所示:
button:focus {
outline: 0 !important;
}
但是当我使用none值时，它对我不起作用。
将按钮的轮廓和框影属性都设置为none，并使它们重要。
input[type=button] {
outline: none !important;
box-shadow: none !important;
}
The reason for setting the values to **important** is that, if you are using other CSS libraries or frameworks like Bootstrap, it might get overridden.
