como remover a linha pontilhada ao redor do elemento clicado em html

114

Eu descobri que se houver um a link na página que não leva a uma nova página, quando o usuário clicar nele, haverá uma linha pontilhada ao redor do elemento, que só desaparecerá quando o usuário clicar em qualquer outra coisa na página, como remover isso?

Exemplo:

insira a descrição da imagem aqui

Observe a linha pontilhada ao redor do elemento Section 2.

html css

— hguser
fonte

Como manter o contorno para tabulação dos elementos, mas removê-lo quando um é clicado?

— Costa

198

Use outline:nonepara ancorar a classe de tag

— Sowmya
fonte

Obrigado, mas não está funcionando para mim, eu criei tantos links anteriormente que nunca tive esse problema até agora. mas agora estou confuso então qual é a razão anterior ao presente?

— Durga Rao de

17

Observe que isso prejudicará a acessibilidade do seu site.

— mike23 de

3

@Durgaprasad veja a resposta de Marcos. Você precisa aplicar isso a:active, a:focustambém.

— Odys

Eu concordo com mike23. Minha tentativa de chegar a um acordo é, no evento de clique (ou talvez o mouseup seja ainda melhor?), Remover o contorno apenas para aquele link (ao mesmo tempo, redefinir todos e quaisquer links de volta para ter um contorno logo antes da remoção. . caso contrário, as coisas ficam cumulativamente presas sendo sem contorno). Isso remove temporariamente o contorno do último elemento clicado enquanto o mantém em outros, para que você ainda possa saber o que está passando.

— Max Starkenburg

1

@cpu_meltdown Tryinput:focus{outline: none}

— Sowmya

55

Como @Lo Juego disse, leia o artigo

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

— Marca
fonte

12

a {
    outline: 0;
  }

Mas leia isso antes de mudar:

removendo o contorno pontilhado

— Lo Juego
fonte

8

Experimente com !importantem css.

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

— Akash
fonte

7

Para remover todos os contornos pontilhados, incluindo aqueles nos 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: Você deve adicionar link href para bootstrap css antes do css principal, para que o bootstrap não substitua seu estilo.

— OldTrain
fonte

3

A remoção outlineprejudicará a acessibilidade de um site. Portanto, deixo isso lá, mas o torno invisível.

a {
   outline: transparent;
}

— Chankruze
fonte

1

Definir o contorno para ser transparente ainda prejudica a acessibilidade do seu site. A ideia é que ele forneça um indicador visual de que um elemento está em foco. Se você torná-lo invisível, esse indicador será perdido. Mais informações aqui: outlinenone.com

— ktbee

1

No meu caso era um botão e, aparentemente, com botões, isso é um problema apenas no Firefox. Solução encontrada aqui :

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

— Andrew
fonte

0

É simples tentar abaixo do código -

a{
outline: medium none !important;
}

Se felicidades! Dia bom

— loyola
fonte