Cómo eliminar el resaltado del borde en un elemento de texto de entrada
Cuando un elemento HTML está "enfocado" (actualmente seleccionado/con pestañas), muchos navegadores (al menos Safari y Chrome) pondrán un borde azul alrededor de él.
Para el diseño en el que estoy trabajando, esto distrae y no se ve bien.
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox no parece hacer esto, o al menos me dejará controlarlo con:
border: x;
Si alguien puede decirme cómo funciona IE, tendría curiosidad.
Sería bueno lograr que Safari elimine este pequeño detalle.
Antes de hacer eso, tenga en cuenta que el esquema de enfoque es una característica de accesibilidad y usabilidad; le indica al usuario en qué elemento está enfocado actualmente, y muchos usuarios dependen de ello. Necesita encontrar otros medios para hacer visible el enfoque.
En tu caso, prueba:
input.middle:focus {
outline-width: 0;
}
O en general, para afectar a todos los elementos básicos del formulario:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
En los comentarios, Noah Whitmore sugirió llevar esto aún más lejos para admitir elementos que tengan el contenteditableatributo establecido en true(convirtiéndolos efectivamente en un tipo de elemento de entrada). Lo siguiente también debería apuntar a ellos (en navegadores compatibles con CSS3):
[contenteditable="true"]:focus {
outline: none;
}
Aunque no lo recomendaría, para completar, siempre puedes desactivar el esquema de enfoque en todo con esto:
*:focus {
outline: none;
}
