Come rimuovere il bordo (struttura) attorno a caselle di testo / input? (Chrome)

Qualcuno può spiegare come rimuovere il bordo arancione o blu (contorno) attorno a caselle testo / input? Penso che capiti solo su Chrome per mostrare che la casella di input è triggers. Ecco l’input CSS che sto usando:

input { background-color: transparent; border: 0px solid; height: 20px; width: 160px; color: #CCC; } 

inserisci la descrizione dell'immagine qui

Questo bordo è usato per mostrare che l’elemento è focalizzato (cioè puoi digitare l’input o premere il pulsante con Invio). Puoi rimuoverlo, però:

 textarea:focus, input:focus{ outline: none; } 

Potresti voler aggiungere un altro modo per far sapere agli utenti quale elemento ha l’attenzione per la tastiera per l’usabilità.

Chrome applicherà anche l’evidenziazione ad altri elementi come i DIV usati come modali. Per evitare l’evidenziazione su questi e su tutti gli altri elementi, puoi fare:

 *:focus { outline: none; } 

La risposta attuale non ha funzionato con Bootstrap 3.1.1. Ecco cosa ho dovuto ignorare:

 .form-control:focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; } 
 input:focus { outline:none; } 

Questo lo farà. Il contorno arancione non verrà più visualizzato.

  

Ha funzionato bene per me. Volevo averlo risolto in html stesso … 🙂

Ho trovato la soluzione.
Ho usato: outline:none; nel CSS e sembra aver funzionato. Grazie comunque dell’aiuto. 🙂

Soluzione

 *:focus { outline: 0; } 

PS: Usa outline:0 invece di outline:none a fuoco. È una pratica valida e migliore.

questo rimuove la cornice arancione in cromo da tutti e da qualsiasi elemento, non importa cosa e dove sia

 *:focus { outline: none; } 

Utilizzare la seguente syntax per rimuovere il bordo della casella di testo e rimuovere il bordo evidenziato dello stile del browser.

 input { background-color:transparent; border: 0px solid; height:30px; width:260px; } input:focus { outline:none; } 

Ho scoperto che puoi anche usare:

 input:focus{ border: transparent; } 

Impostato

 input:focus{ outline: 0 none; } 

“! importante” è solo nel caso in cui. Non è necessario. [E ora è andato. -Ed.]

Questo funzionerà sicuramente. Il contorno arancione non verrà più visualizzato. Comune per tutti i tag:

 *:focus { outline: none; } 

Specifico per alcuni tag, es: tag di input

 input:focus { outline:none; }