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

Question

当点击其他地方边框消失时，尝试onfocus none，但没有帮助，点击时如何让丑陋的按钮边框消失？

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

<input type="button" value="Example Button">

Answer 1

使用 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>

Answer 2

关注Chrome和FF中的大纲

除去：

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

<强> Demo

P.S：

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Answer 3

它对我来说很简单：）

*:focus {
    outline: 0 !important;
}

Answer 4

将按钮的outline和box-shadow属性都设置为none，并使其重要。

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

将值设置为重要的原因是，如果您使用的是其他CSS库或类似Bootstrap的框架，则可能会被覆盖。

Answer 5

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

• outline-style
• outline-width
• outline-color

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

button {
    outline-style: none;
}

Answer 6

这个对我有用

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

Answer 7

为避免在更改焦点上的outline属性时引起的问题，请在用户单击输入按钮上的Tab或单击它时提供视觉效果。

在这种情况下是一种提交类型，但是您也可以将其应用于类型=“ button”。

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

Answer 8

删除大纲是一种无障碍的噩梦。使用键盘的用户标签永远不会知道他们所依据的项目。

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

UIImage

然后您可以在需要时应用该课程。

Answer 9

鉴于以下html：

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

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

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

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

Answer 10

button:focus{outline:none !important;}

添加!important（如果用于引导程序

）

Answer 11

许多其他人提到，selector:focus {outline: none;}将删除该边框，但该边框是一项关键的辅助功能，允许键盘用户找到该按钮，并且不应< / em>被删除。

由于您的关注似乎只是一种美学考虑，因此您应该知道可以更改轮廓的颜色，样式和宽度，使其更适合您的网站样式。

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

速记：

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

Answer 12

这比您想像的要简单得多。将按钮聚焦后，应用outline属性，如下所示：

button:focus {
    outline: 0 !important;
}

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

Answer 13

在标准的Web开发中，删除nessorry可访问事件不是一个好主意。 无论哪种方式，如果您正在寻找仅删除轮廓的解决方案都无法解决问题。您还必须去除蓝色阴影。在特定情况下，请使用单独的类名称将此特殊样式隔离到您的按钮上。

.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);
 }

Answer 14

使用键盘时还原轮廓的另一种方法是使用:focus-visible。但是，这不适用于IE：https://caniuse.com/?search=focus-visible。

Answer 15

还需要注意的是，outline: none 可以应用于 <button> 标签和 input[type=button] 以在点击时移除浏览器应用的边框。

Answer 16

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

a:focus {outline: none;
}

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

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

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