html - CSS如何摆脱点击时和点击后自定义按钮周围出现的边框

Question

我有一个自定义按钮类(在线创建，因为这是我第一次尝试网页)。单击它时，直到单击其他内容为止，按钮周围会出现一个灰色边框，作为一个框，厚度可能为两个像素。当点击其他东西时它会消失(我的自定义按钮有圆 Angular 所以它很明显。

这不会出现在 OS-X 上的 Safari 中，但会出现在 Chrome 中。使用 FireFox 时，边框为 1 像素厚，并在我的自定义框内出现一个框。 (它不会在 IE 上运行，因为我们在 IE8 上停留了一段时间。)这很烦人。

HTML:

<button class='command-btn' type='button' id='find-camera-btn'>Find Camera</button>

CSS3:

.command-btn {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   color: blue;
   width: 130px;
   height: 40px;
   float: left;
   margin: 6px 0px 5px 10px;
   background: -moz-linear-gradient(top, #0aa31b 0%, #d7de16 99%, #ebeb0e);
   background: -webkit-gradient(linear, left top, left bottom, from(#0aa31b),
     color-stop(0.99, #d7de16), to(#ebeb0e));
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
   border-radius: 14px;
   border: 1px solid #6d8000;
   -moz-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px
     rgba(255, 255, 255, 1);
   -webkit-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px
      2px rgba(255, 255, 255, 1);
   box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px
     rgba(255, 255, 255, 1);
   text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.2), 0px 1px 0px
     rgba(255, 255, 255, 0.4);
}

我正在使用 Dart，但“OnClick”方法中的代码并不重要。如果我可以在单击后移动焦点，那将解决问题，但我不知道该怎么做。

Answer 1

添加规则:

outline: 0;

应该做的工作