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

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

score 299 · Accepted Answer

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

score 96 · Accepted Answer

Chrome 和 FF 中的焦点大纲：

删除 CSS 中的 Chrome 按钮轮廓删除 CSS 中的 Firefox 按钮轮廓

删除按钮焦点轮廓：

CSS中没有轮廓的按钮

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

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

score 85 · Accepted Answer

85

它对我来说很简单:)

*:focus {
    outline: 0 !important;
}

于 2014-12-01T09:29:21.000 回答

score 34 · Accepted Answer

34

这个对我有用

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

于 2017-06-08T20:27:21.927 回答

score 30 · Accepted Answer

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

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

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

score 17 · Accepted Answer

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

outline-style
outline-width
outline-color

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

button {
    outline-style: none;
}

score 11 · Accepted Answer

11

button:focus{outline:none !important;}

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

于 2019-03-09T02:30:29.510 回答

score 4 · Accepted Answer

为了避免在焦点上更改大纲属性时引起的问题，是在用户在输入按钮上 Tab 或单击它时给出视觉效果。

在这种情况下是提交类型，但您也可以应用到 type="button"。

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

score 3 · Accepted Answer

给定下面的html：

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

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

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

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

button:focus {
    outline: 0 !important;
}

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

score 3 · Accepted Answer

正如许多其他人提到的那样，selector:focus {outline: none;}将删除该边框，但该边框是一个关键的可访问性功能，允许键盘用户找到按钮并且不应该被删除。

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

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

速记：

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

score 2 · Accepted Answer

Removing the outline is an accessibility nightmare. People tabbing using keyboards will never know what item they're on.

Best to leave it, as most clicked buttons will take you somewhere anyway, or if you HAVE to remove the outline then isolate it a specific class name.

.no-outline {
  outline: none;
}

Then you can apply that class whenever you need to.

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

a:focus {outline: none;
}

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

顺便说一句，这没有（27.4.2021）：

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

score 0 · Accepted Answer

这也是一个很好的注意，outline: none可以应用于两个<button>标签并input[type=button]在点击时删除浏览器应用的边框。

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

16 回答 16

Related

Reference