REMOVENDO PONTILHADO DOS LINKS
Postado em: 11 de julho de 2006 por Pedro Rogério
Muitas vezes quando clicamos em algum link, costuma ficar em volta do mesmo uma linha pontilhada, como você pode ver na imagem acima, pelos testes que fiz, isso só acontece no Firefox, pelo menos no IE 6 e no Opera 9, tudo fica normal, mas existe uma maneira muito fácil de fazer com que isso não aconteça, nas tags a do seu CSS, basta você aplicar o seguinte código:
a { outline:0; }
Mais simples impossível!!!
Bardo disse: 11.07.06 ás 07:53
Mas por que existe o pontilhado?
Digamos que você sofra de algum problema físico que lhe impeça de utilizar o mouse. Você terá que se virar com o teclado. E com o teclado, você usará a tecla TAB para navegar de link em link até o que você deseja.
Agora pergunto: como saber em que link você está se não há informação visual nenhuma? Por isso é importante manter o pontilhado. Ele não surgiu por questão de aspecto, mas de usabilidade.
[]s
Osny Santos Netto disse: 11.07.06 ás 15:54
Sempre pensei que o css não fosse capaz de tirar esse pontilhado.
Eu resolvia com “onclick”.
Ótima matéria.
rafael disse: 11.07.06 ás 18:15
No firefox ate saiu mais no meu IE( versao 6) continua o pontilhado.
Pedro Rogério disse: 11.07.06 ás 22:03
Experimente fazer assim:
* { outline: 0; }Daniel disse: 11.07.06 ás 22:29
Concordo e discordo com o bardo.
Por um lado ele anula qualquer tipo de acessibilidade mas por outro ajuda a deixar o site mais “bonito” de se ver.
As vezes esses pontilhados encomodam mas na maioria das vezes ajuda muito quando se usa o tab para mudar de conteudo.
[]’s
golfetto disse: 31.07.06 ás 17:03
perfeito..
Juan disse: 05.08.06 ás 14:54
Ainda sim, sem o pontilhado, há uma solução quanto ao problema com o TAB: usando ele, você ainda pode ver o endereço do link selecionado na barra de status
Muito útil isso, também não sabia pra que servia esse outline: e nem que dava pra fazer com CSS.
No IE6 também funcionou!
Flavio Mendes disse: 13.09.06 ás 13:47
Muito bom… precisei disso um dia desses mas não sabia como fazer. Agora sei
SPIKE disse: 25.12.06 ás 21:30
bem nao tem como ao invés do pontilhado, utilizar de outro indicador, tipo uma cor diferente ou um efeito? vlw excelente materia
Luany disse: 18.06.07 ás 21:03
e como faz pra aparece o pontilhado no IE?
Pedro Rogério disse: 18.06.07 ás 22:03
@Luany,
O IE é tão bom que não tem suporte a isso!!!
Luany disse: 18.06.07 ás 22:07
ué, mas antes aparecia no meu :S
qdo eu tinha um pc velho windows 98 tbm…
e tbm aparecia em umas fotos tp assim “se quiser utilizar isso clique aqui”
Pedro Rogério disse: 19.06.07 ás 09:01
@Luany,
Me desculpe, o IE tem suporte sim, agora se não está aparecendo, ou esse código que postei está no CSS, ou existe algum problema com a página em questão!!!
Cindy disse: 30.06.07 ás 14:41
EU QUERIA SABER O CONTRARIO…COMO FAÇO PARA COLOCAR O PONTILHADO??
Luiz disse: 08.08.07 ás 17:47
ABRAÇÃO GAJO!!!!!!!!!
Meus sinceros agradecimentos ao pedro Rogério, sempre procurei a resposta para isso… acho que demorou para você aparecer 1° no google! Valeu “Pinceladas”!
abaixo, respondo uma dúvida, e coloco uma URL do site do Maujor
______________________________________________________
Para aparecer eu tentaria outline:1px
lembrando que existem no css:
a:focus (que é um pseudo elemento do CSS 2.1 - http://www.maujor.com/tutorial/seletores_css21_parte3.php)
se o usuário tem deficiência e não usa o mouse, o bom senso diz (e uma ong ou um bom amigo também vão dizer) para usar firefox… então vai funcionar (e acho que o IE7 suporta tb)
se não funcionar o tal do outline: a:focus{border: 1px solid #CCC} mata a charada. Aparência e acessibilidade….
João Marcos Santso Teixeira disse: 23.11.07 ás 00:12
Cara, essa era a unica coisa que emburrava meu parceiro de trabalho que é designer!
Valeu!
Luã de Souza disse: 07.04.08 ás 16:09
Fala Pedro
Ótima dica, já tinha lido no feed na época do post e acabei precisando agora…
Quanto ao lance da acessibilidade, acho que em locais (leia: links) onde se é necessário isso, deve-se implementar a pseudo-classe :active pra executar uma borda decente
Acho que isso deve ser usado com moderação
Sergio Santos disse: 09.09.08 ás 21:02
Não deu certo aqui no meu código, fiz de todas as maneiras possíveis e o pontilhado continua aparecendo no IE 6.
Pedro Rogério disse: 09.09.08 ás 21:18
@Sergio,
Experimente assim: * {outline:0}
Sergio Santos disse: 10.09.08 ás 01:44
Prezado Pedro,
Infelizmente também não deu certo. Já fiz vários testes colhidos na Internet e nenhum deles funcionaram.
Obrigado!