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

Question

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

这不会出现在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;

应该做的工作