When I click somewhere else the border disappears, I tried to use onfocus: none, but that didn't help. How to make this ugly button border disappear when I click on it?

当我点击其他边框消失的地方时，我试图使用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">

Using outline: none; you can remove that border in chrome.

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

Focus outline in Chrome and FF:

Chrome和FF中的焦点轮廓：

removed button focus outline:

已删除按钮焦点轮廓：

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

It works for me simply :)

它对我来说很简单：)

*:focus {
    outline: 0 !important;
}

Set both the outline and the box-shadow properties of the button to none and make them important.

将按钮的轮廓和框阴影属性都设置为None，并使它们变得重要。

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

This one worked for me

这个对我很管用

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

The outline property is what you need. It's shorthand for setting each of the following properties in a single declaration:

Outline属性就是您所需要的。它是在单个声明中设置以下每个属性的快捷方式：

• outline-style


• outline-width


• outline-color

You could use outline: none;, which is suggested in the accepted answer. You could also be more specific if you wanted:

您可以使用Outline：None；，这是公认答案中的建议。如果你愿意，你也可以说得更具体：

button {
    outline-style: none;
}

button:focus{outline:none !important;}

add !important if it is used in Bootstrap

如果在Bootstrap中使用，请注意添加！

To avoid the problem caused when you change the outline property on a focus, is to give a visual effect when the user Tab on the input button or click on it.

为了避免在更改焦点的Outline属性时引起的问题，是在输入按钮上的用户选项卡上或单击它时提供视觉效果。

In this case is a submit type, but you can apply to a type="button" too.

在本例中是提交类型，但您也可以应用于a type=“Button”。

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

Given the html below:

给定下面的html：

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

In the css style do the following:

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

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

This code will remove button border and will disable button border focus when the button is clicked.

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

As many others have mentioned, selector:focus {outline: none;} will remove that border but that border is a key accessibility feature that allows for keyboard users to find the button and shouldn't be removed.

正如许多其他人提到的，选择器：Focus{Outline：None；}将删除该边框，但该边框是一个关键的可访问性功能，允许键盘用户找到按钮，不应删除。

Since your concern seems to be an aesthetic one, you should know that you can change the color, style, and width of the outline, making it fit into your site styling better.

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

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

Shorthand:

速记：

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

It's greatly simple than you think. When the button is focussed, apply the outline property, like this:

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

button:focus {
    outline: 0 !important;
}

But when I use none value, it doesn't work for me.

但是当我不使用任何值时，它对我就不起作用了。

Removing nessorry accessible event not a good idea in up to standard web developments.
either way if you looking for a solution removing just the outline doesn't solve the problem. you also have to remove the blue color shadow. for specific scenarios use a separate class name to isolate the this special style to your button.

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

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Better do this

最好还是这样做

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

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.

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

Another alternative to restore outline when using the keyboard is to use :focus-visible. However, this doesn't work on IE :https://caniuse.com/?search=focus-visible.

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

Since Chrome and Mozilla added this line not only around buttons but also around linked text, I use on my site this:

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

a:focus {outline: none;
}

Works for both browsers, links, and buttons.

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

Btw, this did not (27.4.2021):

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

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

It's also good note that outline: none can be applied to both <button> tags and input[type=button] to remove the browser-applied border on click.

还需要注意的是，Outline：None可以同时应用于标记和输入[type=Button]，以便在单击时移除浏览器应用的边框。

Use the below css:

使用下面的css：

.btn {
  border: none !important;
  background-color: white;
}

Try with this, you have to make

试着用这个，你必须做

border: none !important