2010-09-07 15 views
37

Estoy ejecutando Mac OS, así que realmente no puedo decir si este efecto se presenta en las máquinas de Windows o no, por lo que me disculpo si este efecto no se ve para usted.Deshacerse del rectángulo de foco azul en cuadros de entrada en HTML/CSS?

Los campos de texto y de entrada parecen tener un rectángulo azul cuando están enfocados, al menos en Firefox y Chrome en una Mac. Tengo un efecto de enfoque personalizado en un sitio, y me pregunto si puedo evitar que se muestre este comportamiento de selección predeterminado. Google lo evita en su sitio. Fui tan lejos como para obtener el estilo de CSS 'en efecto' para el cuadro de entrada de Google, aplicar eso a mi objeto css. Sin embargo, todavía muestra el rectángulo azul. No estoy exactamente seguro de qué tipo de vudú google está haciendo, pero me parece que no son atributos HTML o CSS. Alguien sabe cómo evitar este efecto? ¡Gracias!

Respuesta

99

De hecho, es un atributo CSS. Esto ocultará ese efecto brillante:

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

Lo he usado antes, también ... Doh. Muchas gracias. (Funciona de maravilla) – Kyle

+11

Tenga en cuenta que esta es una función de usabilidad del navegador. Los usuarios, especialmente los usuarios centrados en el teclado, saben cómo se enfoca antes de escribir. Si elimina este comportamiento, considere proporcionar otras formas de indicar el foco para el usuario. – Doug

+0

Para agregar a lo que Doug dijo, esto no es solo una característica de usabilidad, es una característica de accesibilidad. Ver http://developer.chrome.com/extensions/a11y.html#keyboard Es un poco molesto que en OSX el contorno sea tan audaz. –

Cuestiones relacionadas