如何从HTML输入/按钮中删除焦点矩形？

Question

我在页面上放置了一个输入按钮 (type="button")：

当我点击它时，周围会出现令人讨厌的焦点矩形框：

如何去除它？

这是我的代码：

/*Buttons/Inputs*/
                    
.runInput {
   border-top: 1px solid #ffffff;
   background: #001cbd;
   background: -webkit-gradient(linear, left top, left bottom, from(#148bfa), to(#001cbd));
   background: -webkit-linear-gradient(top, #148bfa, #001cbd);
   background: -moz-linear-gradient(top, #148bfa, #001cbd);
   padding: 6.5px 13px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 24px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.runInput:hover {
   background: #001cbd;
   color: #d9d9d9;
   }
.runInput:active {
   background: #00046e;
   }
.runInput:focus {
   outline: 0;
}

<input class="runInput" onclick="runCode();" type="button" value="Run">

我尝试将outline: none;添加到我的CSS中，但是它并没有起作用。 感谢您的回答！ 编辑：我更改了代码片段。

- Thurinum

---

可能是如何消除Firefox上按钮和链接的虚线轮廓？的重复问题。 - Barun

我尝试点击代码片段上的按钮，但是我没有看到矩形。我正在使用Chrome浏览器。你在使用什么浏览器？也许可以尝试一下Barun的建议。 - Cons7an7ine

你在哪个浏览器上遇到了问题？如果是Firefox，那么潜在的重复问题的答案应该能解决你的问题。 - Pac0

我正在使用Firefox，我会查看这篇文章，谢谢。 - Thurinum

你是正确的，问题是由于 Firefox 导致的！我在另一个浏览器中尝试了一下，它完美地工作了。 - Thurinum

Answer 1

只需添加：

:focus {
    outline: 0 !important;
}

它适用于所有元素。

或者

如果你只需要为这个类添加，则添加

.runInput:focus {
    outline: 0 !important;
}

- Zahidul Islam Ruhel

Answer 2

你应该能够使用outline来实现这个，但必须正确引用。

.runInput:focus {
    outline: 0;
}

或者

.runInput:focus {
    outline: none;
}

JSfiddle 示例

- redditor