当我点击其他地方的边界消失,我试图使用onfocus: none,但这没有帮助。如何使这个丑陋的按钮边界消失时,我点击它?
输入(type =按钮){ 宽度:120 px; 高度:60 px; margin-left: 35 px; 显示:块; 背景颜色:灰色; 颜色:白色; 边界:没有; } <input type="button" value="Example button" >
当我点击其他地方的边界消失,我试图使用onfocus: none,但这没有帮助。如何使这个丑陋的按钮边界消失时,我点击它?
输入(type =按钮){ 宽度:120 px; 高度:60 px; margin-left: 35 px; 显示:块; 背景颜色:灰色; 颜色:白色; 边界:没有; } <input type="button" value="Example button" >
当前回答
button:focus{outline:none !important;}
如果在Bootstrap中使用,则重要
其他回答
这对我来说很简单:)
*:focus {
outline: 0 !important;
}
这比你想象的要简单得多。当按钮被聚焦时,应用outline属性,如下所示:
button:focus {
outline: 0 !important;
}
但是当我使用none值时,它对我不起作用。
同样值得注意的是outline: none可以应用于<button>标签和input[type=button]来删除浏览器应用的单击边框。
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 */
}
移除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);
}