如何从输入按钮删除轮廓边框

当我点击其他地方的边界消失，我试图使用onfocus: none，但这没有帮助。如何使这个丑陋的按钮边界消失时，我点击它?

输入(type =按钮){ 宽度:120 px; 高度:60 px; margin-left: 35 px; 显示:块; 背景颜色:灰色; 颜色:白色; 边界:没有; ｝ <input type="button" value="Example button" >

当前回答

这对我来说很简单:)

*:focus {
    outline: 0 !important;
}

其他回答

同样值得注意的是outline: none可以应用于<button>标签和input[type=button]来删除浏览器应用的单击边框。

这个方法对我很管用

button:focus {
    border: none;
    outline: none;
}

outline属性就是您所需要的。它是在单个声明中设置以下每个属性的简写:

outline-style outline-width 边框色

你可以使用outline: none;，这是公认答案中的建议。如果你想，你也可以说得更具体:

button {
    outline-style: none;
}

给定下面的html:

<button class="btn-without-border"> Submit </button>

在css样式中执行以下操作:

.btn-without-border:focus {
    border: none;
    outline: none;
}

此代码将删除按钮边框，并在单击按钮时禁用按钮边框焦点。

在使用键盘时，另一种恢复轮廓的方法是使用:focus-visible。但是，这在IE:https://caniuse.com/?search=focus-visible上不起作用。

推荐文章