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

小开

使用outline: none;可以在chrome中删除该边框。

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

小开

Chrome和FF中的焦点轮廓:

Remove Chrome button outline in CSS Remove Firefox button outline in CSS .

删除按钮焦点轮廓:

CSS中没有轮廓的按钮

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 */
}

小开

这对我来说很简单:)

*:focus {
outline: 0 !important;
}

小开

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

outline-style
outline-width
outline-color

您可以使用outline: none;，这是在已接受的答案中建议的。如果你想，你也可以说得更具体:

button {
outline-style: none;
}

小开

这个方法对我很管用

button:focus {
border: none;
outline: none;
}

小开

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

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

.no-outline {
outline: none;
}

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

小开

给定下面的html:

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

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

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

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

小开

正如许多人提到的，selector:focus {outline: none;}将删除边界但，该边界是一个关键的可访问性特性，允许键盘用户找到按钮和不应该被删除。

由于您关心的似乎是一个美学问题，您应该知道您可以更改轮廓的颜色、样式和宽度，使其更适合您的网站样式。

selector:focus {
outline-width: 1px;
outline-style: dashed;
outline-color: red;
}

速记:

selector:focus {
outline: 1px dashed red;
}

小开

button:focus{outline:none !important;}

如果引导中使用了!important，则添加!important

小开

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

button:focus {
outline: 0 !important;
}

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

小开

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

在本例中是提交类型，但您可以应用到type="button"了。

input[type=submit]:focus {
outline: none !important;
background-color: rgb(208, 192, 74);
}

小开

移除nessorry可访问事件不是一个好主意，在达到标准的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和box-shadow属性设置为none，并使它们为重要的。

input[type=button] {
outline: none !important;
box-shadow: none !important;
}

将值设置为**important**的原因是，如果您正在使用其他CSS库或框架，如Bootstrap，它可能会被覆盖。

小开

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

小开

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

小开

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

a:focus {outline: none;
}

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

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

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