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

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


当前回答

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

outline-style outline-width 边框色

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

button {
    outline-style: none;
}

其他回答

移除nessorry accessible事件在标准的web开发中不是一个好主意。 无论哪种方法,如果你在寻找解决方案,仅仅去掉轮廓并不能解决问题。您还必须删除蓝色阴影。对于特定的场景,请使用单独的类名将此特殊样式与按钮隔离。

.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);
 }

删除大纲是可访问性的噩梦。使用键盘的人永远不知道他们在敲什么。

最好离开它,因为大多数点击按钮会把你带到某个地方,或者如果你必须删除轮廓,然后把它隔离为一个特定的类名。

.no-outline {
  outline: none;
}

然后,您可以在需要时应用该类。

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

正如许多人提到的,selector:focus {outline: none;}将删除该边框,但该边框是一个关键的可访问性特性,允许键盘用户找到按钮,不应该被删除。

由于您关心的似乎是一个美学问题,您应该知道您可以更改轮廓的颜色、样式和宽度,使其更适合您的网站样式。

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

速记:

selector:focus {
  outline: 1px dashed red;
}

这比你想象的要简单得多。当按钮被聚焦时,应用outline属性,如下所示:

button:focus {
    outline: 0 !important;
}

但是当我使用none值时,它对我不起作用。