Removendo pontilhado dos links
Postado por: Pedro Rogério em
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!!!
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
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
Sempre pensei que o css não fosse capaz de tirar esse pontilhado.
Eu resolvia com “onclick”.
Ótima matéria.
No firefox ate saiu mais no meu IE( versao 6) continua o pontilhado.
Experimente fazer assim:
* { outline: 0; }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
perfeito..
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!
Muito bom… precisei disso um dia desses mas não sabia como fazer. Agora sei
bem nao tem como ao invés do pontilhado, utilizar de outro indicador, tipo uma cor diferente ou um efeito? vlw excelente materia
e como faz pra aparece o pontilhado no IE?
@Luany,
O IE é tão bom que não tem suporte a isso!!!
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”
@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!!!
EU QUERIA SABER O CONTRARIO…COMO FAÇO PARA COLOCAR O PONTILHADO??
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….
Cara, essa era a unica coisa que emburrava meu parceiro de trabalho que é designer!
Valeu!
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
Não deu certo aqui no meu código, fiz de todas as maneiras possíveis e o pontilhado continua aparecendo no IE 6.
@Sergio,
Experimente assim: * {outline:0}
Prezado Pedro,
Infelizmente também não deu certo. Já fiz vários testes colhidos na Internet e nenhum deles funcionaram.
Obrigado!
Perfeito.
Algumas vezes por questões estéticas temos que retirar o pontilhado. Funcionou perfeitamente em todos os navegadores.
Quanto a Usabilidade dita pelo BARDO, sugiro aplicar o href em alguma classe ou tag ao invés de diretamente no texto, assim ao usar TAB o pontilhado reaparece. ; )
Boa dica Pedro.
Testei e não funciona no IE6 nem no IE7, só funciona no FF…
Untitled Document
*{ outline:0; outline:none;}
teste
Se alguém conseguir posta ae flwww
@Rafael,
O IE6 e o IE7 não dão suporte a outline. Já na versão 8 o outline funciona corretamente.
Pessoal, Pedro , me da um help…
to com um problema bem parecido com este….
tenho um SWF em um HTML com transparent.
Nele tem um Formulario, so que quando clico fica uma borda pontilhada em volta da area do arquivo do flash. isso encomoda a min e aos clientes mas ja tentei de tudo e não consigo retirala!!!
vc tem alguma treta que tira??
por favor ajuda aew!
@Pedro,
Isso aqui pode lhe ajudar:
http://www.pinceladasdaweb.com.br/blog/2007/12/13/diga-adeus-ao-clique-aqui-para-ativar-esse-controle/
Bardo, é bem válida sua questão, porém pode ser visto onde vc está o selecionado pela barra de status….lá toda vez que aperta a tecla TAB, o descrição na barra de status vai de acordo para onde está selecionado. O lance todo se o nome do arquivo não condiz o link, tipo um link que é para ir no contato, ter um nome todo esquesito, nada haver com que condiz com o lugar que vai….mas ai é questão td do programador ter coerencia e colocar url amigaveis…. Tive um problema com o mouse estava no site do G1.com.br ai tive que usar as tecla TAB para ir para outra matéria, acredito que eles usam o outiline=0 nao cheguei a conferir, digo isso pq nao conseguia ver onde estava o TAB, olhei para a barra de status e visualiza o nome do titulo da matéria que postavam…ai ficou fácil identificar onde o selecionado tava!