CSS - Rimozione del campo di input evidenziazione attiva

Utilizzando solo html e css, come disattivare il colore di evidenziazione blu (in Firefox) attorno a un campo di input attivo. Ho provato a utilizzare input {outline:none;} ma senza successo. Grazie per l'aiuto! =)CSS - Rimozione del campo di input evidenziazione attiva

ok, ignorando il precedente codice sulla struttura, ho scelto la proprietà errata da modificare. Quello che sto cercando di ottenere è semplicemente rimuovere l'evidenziazione (qualunque sia il browser, il suo bordo in grassetto e colorato che appare) attorno a un campo di input del modulo attivo, senza modificare o disabilitare lo stile. Grazie =)

fonte

2013-03-16 Kizer Yakuza

Funziona per me ... –

Capisci che questa funzione è considerata di accessibilità, giusto? – cimmanon

qualcuno può aiutare? =) –

Vedere questo fiddle.

Sembra che sia necessario impostare alcune proprietà del bordo per rendere operativo outline: none. Se si commenta la direttiva border, il contorno scompare.

fonte

2013-03-16 19:17:08 ohcibi

per rimuovere l'evidenziazione prova ad aggiungere questa regola il campo di input (s):

-moz-appearance:none;

Questo può essere fatto anche per i browser WebKit base utilizzando il rispettivo prefisso:

-webkit-appearance:none;

Questo dovrebbe occuparsi di qualsiasi confine, contorno, ecc. Usando solo una proprietà CSS. Per i browser diversi dalla coppia WebKit e Firefox - Opera e IE - è consigliabile includere anche le proprietà border e outline, garantendo la compatibilità incrociata del browser.

fonte

2013-03-16 19:19:09 Blieque

sfortunatamente, l'aspetto non è supportato da IE e Opera. –

Ultimo webkit sembra supportare il contorno: nessuno correttamente (provato su cromo proprio ora). @ alex-shesterov questo è il motivo per cui queste proprietà hanno prefissi -moz o -webkit. – ohcibi

@ alex-shesterov Aggiungerò qualcosa su di loro ora. – Blieque

input {border:0; outline:none;}

dovrebbe rimuovere tutti i bordi/contorni.

fonte

2013-03-16 19:20:10

Come questo non vedrai più l'input. – ohcibi

sì, esattamente - ma non è questo quello che volevi? :) try 'border: 1px solid # 000;' or 'border: thin inset;'. per favore descrivi quale aspetto ti aspetti ... –

Non volevo nulla, ma l'OP dice che vuole eliminare il contorno, che viene visualizzato in firefox quando l'input è focalizzato. Non dice che vuole che il bordo visibile in tutti i browser sparisca. Ma impostare un confine sembra fare il trucco su FF, come ho detto nella mia risposta. Chrome (ium) sembra essere soddisfatto solo del contorno: nessuno; – ohcibi

La risposta è più semplice di quanto mi reliased:

box-shadow:none;

fonte

2013-09-26 21:22:22

Devi usare: dichiarazione di messa a fuoco. In questo caso:

input:focus {outline:none;}

Tutto l'input del nel progetto non avranno il bordo blu.

Se si desidera un attributo specifico, utilizzare questo:

input[type=text]:focus {outline:none;}

Speranza che aiuta.=)

fonte

2014-07-17 13:53:11

-1

Questo dovrebbe funzionare per la maggior parte dei tipi di ingresso su Firefox:

input::-moz-focus-inner { border: 0; }

fonte

2014-09-23 16:00:45 Mark

OP ha chiesto una soluzione per qualsiasi browser e non solo per FF – Jinandra

Ah ho letto male il commento di parentesi nel secondo paragrafo. Questo risolve il bordo "interno", piuttosto che l'altro contorno/bordo esterno. – Mark

-1

miglior modo di fare che per tutti i browser nel mantenere il vostro tag input in un altro tag div in modo da coprire confine

HTML codice

<div class='rel lef srch_blck'> 
    <input type='text' class='rel lef srch_pad' name='srch_inp'/> 
</div>

sopra html lascia aggiungere il seguente CSS per avere rimuovere confine

.srch_blck{ overflow:hidden;width:298px;height:28px; } 
.srch_pad{ left:-1px;top:-1px;width:300px;height:31px; }

fonte

2016-03-01 13:34:32

La mia soluzione è quello di uccidere prima i browser di default su ingressi e dargli un bordo predefinito come questo:

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="url"], 
input[type="search"], 
textarea { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    border: 1px solid #ddd; 
}

Poi ho azzerare il dato box-shadow e delineare così:

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
textarea:focus { 
    border: 1px solid #ccc; 
    box-shadow: none !important; 
    outline: none !important; 
}

Ha funzionato per me in tutti i moderni browser testati finora (IE, FF, Chrome, Opera & Safari).

fonte

2016-06-29 14:40:44 Azragh

Non è necessario reimpostare prima. Il codice funziona per me senza resettare. Testato su FF, Chrome e Safari e funziona perfettamente. –

Vero - non è necessario, ma per me è solo più sicuro ..;) – Azragh

CSS - Rimozione del campo di input evidenziazione attiva

risposta

Problemi correlati