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

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


当前回答

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

button:focus {
    outline: 0 !important;
}

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

其他回答

给定下面的html:

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

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

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

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

使用outline: none;你可以在铬中删除边界。

<style>
input[type=button] {
    width: 120px;
    height: 60px;
    margin-left: 35px;
    display: block;
    background-color: gray;
    color: white;
    border: none;
    outline: none;
}
</style>

移除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);
 }

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

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

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

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