Come reimpostare/rimuovere il bordo di evidenziazione/messa a fuoco di Chrome?

Question

Ho visto che il bicromato di potassio mette un bordo più spesso su :focus ma è un po 'come nel mio caso in cui ho usato anche border-radius. C'è comunque per rimuoverlo?

Answer 1

Si dovrebbe essere in grado di rimuoverlo utilizzando

outline: none; 

ma tenere a mente questo è potenzialmente un male per l'usabilità: Sarà difficile dire se un elemento è focalizzato, che può succhiare quando passi attraverso tutti gli elementi di un form usando la chiave Tab - dovresti riflettere in qualche modo quando un elemento è focalizzato.

Answer 2

è possibile impostare outline: none; e il bordo su un colore diverso a fuoco.

Answer 3

Per rimuovere la messa a fuoco predefinita, utilizzare il seguente nel file .css predefinito:

:focus {outline:none;} 

È quindi possibile controllare il colore attenzione confine sia individualmente per elemento, o nel css default:

:focus {outline:none;border:1px solid red} 

Ovviamente sostituire red con il codice esadecimale scelto.

Si potrebbe anche lasciare il confine intatta e controllare il colore di sfondo (o immagine) per evidenziare il campo:

:focus {outline:none;background-color:red} 

:-)

Answer 4

Questo sarà sicuramente lavorare. Arancione contorno non apparirà più .. comune per tutti i tag:

*:focus { 
    outline: none; 
    } 

specifico ad alcuni tag, es: tag input

input:focus{ 
    outline:none; 
    } 

Answer 5

ho dovuto fare tutto il seguito per rimuovere completamente it

outline-style:none; 
box-shadow:none; 
border-color:transparent; 

Answer 6

Il problema si verifica quando si dispone già di uno schema. Chrome cambia ancora qualcosa ed è un vero dolore. Non riesco a trovare cosa cambiare:

.search input { 
    outline: .5em solid black; 
    width:41%; 
    background-color:white; 
    border:none; 
    font-size:1.4em; 
    padding: 0 0.5em 0 0.5em; 
    border-radius:3px; 
    margin:0; 
    height:2em; 
} 

.search input:focus, .search input:hover { 
    outline: .5em solid black !important; 
    box-shadow:none; 
    border-color:transparent;; 
} 

.search button { 
    border:none; 
    outline: .5em solid black; 
    color:white; 
    font-size:1.4em; 
    padding: 0 0.9em 0 0.9em; 
    border-radius: 3px; 
    margin:0; 
    height:2em; 
    background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE)); 
    background: -webkit-linear-gradient(#4EB4F8, #4198DE); 
    background: -moz-linear-gradient(top, #4EB4F8, #4198DE); 
    background: -ms-linear-gradient(#4EB4F8, #4198DE); 
    background: -o-linear-gradient(#4EB4F8, #4198DE); 
    background: linear-gradient(#4EB4F8, #4198DE); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE'); 
    zoom: 1; 
} 

Answer 7

Il modo più semplice è quello di utilizzare qualcosa di simile, ma notare che non può essere che buono.

input { 
    outline: none; 
} 

Spero che questo sia utile.

Answer 8

border:0; 
outline:none; 
box-shadow:none; 

Questo dovrebbe fare il trucco.