CSS Come sbarazzarsi del bordo che appare intorno al pulsante personalizzato acceso e dopo il clic

Question

Ho una classe pulsante personalizzata (creato online in quanto questo è il mio primo tentativo di una pagina web).Quando viene cliccato e finché non viene cliccato qualcos'altro, un bordo grigiastro appare intorno al pulsante come una scatola con probabilmente uno spessore di due pixel.Quando viene cliccato qualcos'altro, se ne va (il mio pulsante personalizzato ha angoli arrotondati, quindi è abbastanza visibile.

Questo non appare su Safari su OS-X ma appare con Chrome.Con Firefox il bordo è spesso 1 pixel e appare una scatola all'interno della mia scatola personalizzata.(Non correre su cioè come siamo bloccati con IE8 per un po '.) È fastidioso.

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);
}

.

Sto usando DART ma non importa quale codice è nel metodo "onclick".Se potessi spostare la messa a fuoco dopo il clic che risolverebbe il problema, ma non so come farlo.

Answer 1

Aggiungi alla regola:

outline: 0;

.

dovrebbe fare il lavoro

Answer 2

.command-btn,
.command-btn:focus,
.command-btn:active {
    border: 0;
    outline: 0;
}

.

Answer 3

hai provato outline: none?