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

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

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

当前回答

这对我来说很简单:)

*:focus {
    outline: 0 !important;
}

其他回答

给定下面的html:

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

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

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

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

这对我来说很简单:)

*:focus {
    outline: 0 !important;
}

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

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

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

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

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

button:focus {
    outline: 0 !important;
}

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

推荐文章