active - (CSS?) ¿Eliminar las líneas "seleccionadas" del navegador alrededor de una imagen hipervinculada?

onclick css

Question

La captura de pantalla adjunta es de OS X / Firefox 3. Tenga en cuenta que la pestaña central (una imagen) tiene una línea de puntos alrededor, aparentemente porque fue la pestaña seleccionada más recientemente. ¿Hay alguna manera de eliminar esta línea punteada en CSS o JavaScript? (Hmmm ... el servicio gratuito de alojamiento de imágenes ha reducido el tamaño de la imagen. Pero si pudiera verlo, notaría un área de selección de líneas punteadas alrededor del bloque).

Captura de pantalla http://www.freeimagehosting.net/uploads/th.fadf78173b.png

Answer 1

Deberá agregar la siguiente línea a su css:

a:active, a:focus { outline-style: none; -moz-outline-style:none; }

(Asumiendo que tus pestañas están hechas usando el elemento a, por supuesto)

[edit] A petición de todos los demás, para los futuros espectadores de esto, debe tenerse en cuenta que el esquema es esencial para los navegadores de teclado, ya que designa dónde está su selección y, por lo tanto, da una pista de dónde podría ir su próxima ''pestaña'' . Por lo tanto, no es aconsejable eliminar esta selección de líneas punteadas. Pero aún es útil saber cómo lo haría, si lo considera necesario.

Y como se menciona en un comentario, si solo está tratando con FF> v1.5, siéntase libre de omitir el -moz-outline-style: none;

Answer 2

En su evento onclick, this.blur ()

o, específicamente establecer el foco en otro lugar.

Answer 3

Para empezar, intente esto

*,*:hover,*:focus,*:active { outline: 0px none; } 

Sin embargo, esto disminuirá la usabilidad.

Deberá aplicar de forma selectiva efectos alternativos cuando sea relevante para que personas como aquellos que navegan principalmente con la tecla TAB tengan una idea de lo que actualmente tiene foco.

div.foo:active, 
div.foo:focus, 
div.foo:hover
{  
  /* Alternative Style */
}

Answer 4

Puedes empezar por mirar: focus y: pseudo clases activas, aunque probablemente no deberías eliminar por completo el formateo de estos casos, ya que son una ayuda de usabilidad muy valiosa.

Answer 5

utilizando

*:focus {outline:0px;} 

eliminará el estilo de las entradas y las áreas de texto cuando se seleccione con el mouse. Asegúrese de agregar estos estilos con un borde para estos elementos de formulario si elige eliminar todos los contornos en: foco.