Come rimuovere il bordo del contorno dal pulsante di input

quando si fa clic da qualche altra parte il bordo scompare, ho provato a mettere a fuoco nessuno, ma non ha aiutato, come far scomparire il brutto bordo del pulsante quando si fa clic su?

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">

utilizzando il contorno: nessuno; possiamo rimuovere quel bordo in Chrome

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Metti a fuoco i contorni in Chrome e FF

rimosso:

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

dimostrazione

Accessibilità (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Per me funziona semplicemente :)

*:focus {
    outline: 0 !important;
}

Questo ha funzionato per me

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

La outlineproprietà è ciò di cui hai bisogno. È una scorciatoia per impostare ciascuna delle seguenti proprietà in una singola dichiarazione:

• outline-style
• outline-width
• outline-color

Potresti usare outline: none;, che è suggerito nella risposta accettata. Potresti anche essere più specifico se volessi:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

aggiungere !importantse è utilizzato in Bootstrap

Impostare outlinele box-shadowproprietà e del pulsante su nonee renderle importanti .

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

Il motivo per impostare i valori su important è che, se stai utilizzando altre librerie CSS o framework come Bootstrap, potrebbe essere sovrascritto.

Per evitare il problema causato quando si modifica la proprietà del contorno su un focus, è quello di dare un effetto visivo quando l'utente Tab sul pulsante di input o fa clic su di esso.

In questo caso è un tipo di invio, ma puoi anche applicare un tipo = "pulsante".

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

È molto semplice di quanto pensi. Quando il pulsante è attivo, applica la outlineproprietà, in questo modo:

button:focus {
    outline: 0 !important;
}

Ma quando uso il nonevalore, non funziona per me.

La rimozione di un evento accessibile non è una buona idea negli sviluppi web standard. in entrambi i casi se stai cercando una soluzione rimuovendo solo il contorno non risolve il problema. devi anche rimuovere l'ombra di colore blu. per scenari specifici utilizzare un nome di classe separato per isolare questo stile speciale nel pulsante.

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

Meglio farlo

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

Rimuovere il contorno è un incubo dell'accessibilità. Le persone che utilizzano la tastiera non sapranno mai su quale elemento si trovano.

Meglio lasciarlo, poiché la maggior parte dei pulsanti cliccati ti porteranno comunque da qualche parte, o se DEVI rimuovere il contorno, isolalo con un nome di classe specifico.

.no-outline {
  outline: none;
}

Quindi puoi applicare quella classe ogni volta che ne hai bisogno.

Dato l'html di seguito:

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

Nello stile CSS fai quanto segue:

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

Questo codice rimuoverà il bordo del pulsante e disabiliterà lo stato attivo del bordo del pulsante quando si fa clic sul pulsante.

Come molti altri hanno già detto, selector:focus {outline: none;}rimuoverà quel bordo, ma quel bordo è una caratteristica di accessibilità chiave che consente agli utenti della tastiera di trovare il pulsante e non dovrebbe essere rimosso.

Poiché la tua preoccupazione sembra essere di tipo estetico, dovresti sapere che puoi modificare il colore, lo stile e la larghezza del contorno, adattandolo meglio allo stile del tuo sito.

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

Abbreviazione:

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