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

当单击其他地方的边框消失时，尝试无焦点，但无济于事，如何使单击时丑陋的按钮边框消失？

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">

使用大纲：无；我们可以在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中的焦点轮廓

删除：

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

演示版

辅助功能（A11Y）

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

它对我来说很简单:)

*:focus {
    outline: 0 !important;
}

这个为我工作

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

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

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

您可以使用outline: none;，这是已接受答案中建议的。如果需要，您还可以更具体：

button {
    outline-style: none;
}

button:focus{outline:none !important;}

!important如果在Bootstrap中使用它，则添加

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

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

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

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

button:focus {
    outline: 0 !important;
}

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

在标准的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);
 }

将按钮的outline和box-shadow属性设置为none，并使它们变得重要。

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

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

删除轮廓是可访问性的噩梦。人们使用键盘进行切换时永远不会知道他们在做什么。

最好将其保留下来，因为无论如何，大多数单击的按钮都会将您带到某个地方，或者如果您必须删除轮廓，则可以将其隔离为特定的类名称。

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