Extracción de bordes punteados en

Question

clic

estoy usando este CSS para eliminar bordes punteados que aparecen cuando se hace clic en hipervínculos

a:active, a:focus, input { 
    outline: 0; 
    outline-style:none; 
    outline-width:0; 
} 

Esto funciona bien, pero no funciona en los botones de entrada que tienen imágenes de fondo.

Answer 1

No es mi lugar cuestionar sus decisiones de diseño, así que aquí tiene.

Sólo añadir esto a la que desea eliminar la línea de puntos

onfocus="if(this.blur)this.blur()" 

Answer 2

No funciona bien. Esto hace que sea imposible navegar por el diseño sin un mouse.

Consulte http://24ways.org/2009/dont-lose-your-focus para obtener un compromiso razonable.

Answer 3

Puede agregar onclick: blur(); por lo que lo mantiene tab-happy y no arruina el diseño cuando se hace clic.

Pero para el registro, esto parece funcionar a través del navegador. La primera parte de IE, el segundo para FF:

input, input:active, input:focus{ 
    outline: 0; 
    outline-style:none; 
    outline-width:0; 
} 

button::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner { 
    border: none; 
} 

Answer 4

Necesitas clases de diferenciar los vínculos que tiene bordes punteados y cuáles no. Usar el selector img no será suficiente.

Diseñe las etiquetas de entrada para que no tengan bordes punteados; incluso podría usar una clase para sus botones de entrada si tiene más de un estilo (Borrar, Enviar, Cancelar, etc.)