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

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

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

当前回答

为了避免在更改焦点上的outline属性时所造成的问题，就是在用户按Tab键输入或点击它时给人一种视觉效果。

在这个例子中是一个提交类型，但是你也可以应用到type="button"。

输入(type =提交):{焦点大纲:不重要; Background-color: rgb(208,192,74); ｝

其他回答

这个方法对我很管用

button:focus {
    border: none;
    outline: 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);
 }

这对我来说很简单:)

*:focus {
    outline: 0 !important;
}

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

a:focus {outline: none;
}

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

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

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

button:focus{outline:none !important;}

如果在Bootstrap中使用，则重要

推荐文章