Como remover a borda dos links com foco (outline) com CSS
Sabe aquela borda que aparece nos links, quando clicamos ou navegamos pela página usando o TAB, que você (ou seu cliente) acha feia? 🤦♂️ Aqui vai uma dica de como removê-la, mas também vou te conscientizar do porquê que não se deve fazer isso. 😠
Para remover é simples:
:focus {
outline:0;
}Deste modo você vai remover o outline de tudo que tem foco em seu site como links, inputs, botões, etc.
Não remova o outline dos links do seu site!
Ao remover o outline você comete um erro gravíssimo de acessibilidade! A finalidade do outline é proporcionar um feedback visual das áreas em que o usuário pode interagir com o site, possibilitando que os mesmos naveguem pela internet exclusivamente pelo uso do teclado. O outline também é muito importante para ajudar pessoas que possuem algum tipo de deficiência visual.
Como estilizar o outline com CSS
Quer deixar o outline mais bonito e com a cara do seu site? É só estilizá-lo! 😎 É muito importante que você mantenha sempre um alto contraste com o fundo e com a cor do texto, para que o outline continue bem visível em todas as áreas do seu site.
:focus {
outline: red solid 2px; /* color | style | width */
}No código acima temos um exemplo de como alterar a cor, estilo e largura do outline com CSS.