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

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


当前回答

由于Chrome和Mozilla不仅在按钮周围添加了这一行,而且在链接文本周围也添加了这一行,我在我的网站上使用这个:

a:focus {outline: none;
}

适用于浏览器、链接和按钮。

顺便说一句,这并没有(27.4.2021):

input[type=button]{
   outline:none;
}
input[type=button]::-moz-focus-inner {
   border: 0;
}

其他回答

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

outline-style outline-width 边框色

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

button {
    outline-style: none;
}

这对我来说很简单:)

*:focus {
    outline: 0 !important;
}

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

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

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

.no-outline {
  outline: none;
}

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

Chrome和FF中的焦点轮廓:

删除按钮焦点轮廓:

button,
input[type=button] {
  outline: none;
}
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner {
  border: 0;
}

/*
  Accessibility (A11Y)
  Don't forget! User accessibility is important
*/
button:focus,
input[type=button]:focus {
  /* your custom focused styles here */
}