cómo eliminar la línea de puntos alrededor del elemento en el que se hizo clic en html

114

Descubrí que si hay un aenlace en la página que no enlaza con una nueva página, cuando el usuario haga clic en él, habrá una línea de puntos alrededor del elemento, solo desaparecerá cuando el usuario haga clic en cualquier otra cosa de la página, ¿cómo para eliminar esto?

Ejemplo:

ingrese la descripción de la imagen aquí

Tenga en cuenta la línea punteada alrededor del elemento Section 2.

html css

— hguser
fuente

¿Cómo se mantiene el contorno para tabular elementos, pero se elimina cuando se hace clic en uno?

— Costa

198

Utilizar outline:nonepara anclar la clase de etiqueta

— Sowmya
fuente

Gracias, pero no me funciona, he creado tantos enlaces anteriormente que nunca tuve este problema hasta ahora. pero ahora estoy confundido, ¿cuál es la razón anterior al presente?

— Durga Rao

17

Tenga en cuenta que esto dañará la accesibilidad de su sitio web.

— mike23

3

@Durgaprasad ver la respuesta de Marks. Necesitas aplicar eso a:active, a:focustambién.

— Odys

Estoy de acuerdo con mike23. Mi intento de llegar a un compromiso es, en el evento de clic (¿o quizás el mouseup sería aún mejor?), Eliminar el esquema solo para ese enlace (mientras que también restablezco todos y cada uno de los enlaces para tener un esquema justo antes de dicha eliminación.) .de lo contrario, las cosas se atascan acumulativamente al no estar descritas). Esto elimina temporalmente el contorno del último elemento en el que se hizo clic y lo mantiene en otros, para que aún pueda saber en qué está tabulando.

— Max Starkenburg

1

@cpu_meltdown Tryinput:focus{outline: none}

— Sowmya

55

Como dijo @Lo Juego, lee el artículo

a, a:active, a:focus {
   outline: none;
}

— marca
fuente

12

a {
    outline: 0;
  }

Pero lee esto antes de cambiarlo:

quitando-el-contorno-punteado

— Lo Juego
fuente

8

Prueba con !importantin css.

a {
  outline:none !important;
}
// it is `very important` that there is `no` `outline` for the `anchor` tag.  Thanks!

— Akash
fuente

7

Eliminar todos los esquemas adorados, incluidos los de los bootstraptemas.

a, a:active, a:focus, 
button, button:focus, button:active, 
.btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {
    outline: none;
    outline: 0;
}

input::-moz-focus-inner {
    border: 0;
}

Nota: Debe agregar el enlace href para bootstrap css antes del css principal, para que bootstrap no anule su estilo.

— OldTrain
fuente

3

La eliminación outlinedañará la accesibilidad de un sitio web. Por lo tanto, lo dejo ahí, pero lo hago invisible.

a {
   outline: transparent;
}

— chankruze
fuente

1

Establecer el esquema para que sea transparente aún perjudica la accesibilidad de su sitio web. La idea es que proporcione un indicador visual de que un elemento está enfocado. Si lo hace no visible, ese indicador se pierde. Más información aquí: outlinenone.com

— ktbee

1

En mi caso fue un botón, y aparentemente, con botones, esto es solo un problema en Firefox. Solución encontrada aquí :

button::-moz-focus-inner {
  border: 0;
}

— Andrés
fuente

0

Es simple probar debajo del código:

a{
outline: medium none !important;
}

¡Si feliz salud! Buen día

— loyola
fuente