2010-09-07 7 views
37

Sono in esecuzione Mac OS, quindi non posso davvero dire se questo effetto è presentato su macchine Windows o no, quindi mi scuso se questo effetto non è visto per voi.Sbarazzarsi del rettangolo blu di messa a fuoco sulle caselle di input in HTML/CSS?

Input e TextField sembrano avere un rettangolo blu quando focalizzati, almeno su Firefox e Chrome su Mac. Ho un effetto di messa a fuoco personalizzato su un sito e mi chiedo se posso evitare di mostrare questo comportamento di selezione predefinito. Google lo evita sul loro sito. Sono arrivato al punto di ottenere lo stile CSS "in-effect" per la casella di input di Google, applicarlo al mio oggetto css. Tuttavia, mostra ancora il rettangolo blu. Non sono esattamente sicuro del tipo di google voodoo che sta facendo, ma mi sembra che non sia né HTML né CSS. Qualcuno sa come evitare questo effetto? Grazie!

risposta

99

È in effetti un attributo CSS. Questo nasconderà quell'effetto luminoso:

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

Ho già usato questo, troppo .. Doh. Grazie mille .. (Funziona brillantemente) – Kyle

+11

Ricorda che questa è una funzionalità di usabilità del browser. Gli utenti, in particolare gli utenti incentrati sulla tastiera, come sapere dove è l'attenzione prima di digitare. Se si rimuove questo comportamento, è consigliabile fornire altri modi per indicare lo stato attivo per l'utente. – Doug

+0

Per aggiungere a ciò che ha detto Doug, questa non è solo una funzione di usabilità, è una caratteristica di accessibilità. Vedi http://developer.chrome.com/extensions/a11y.html#keyboard È un po 'fastidioso che su OSX la struttura sia così audace. –

Problemi correlati