José Carlos Web Designer e Desenvolvedor Front-end | Freelancer

JOSÉ CARLOS ARAÚJO

Web Designer e Front-end developer freelancer com mais de nove anos de experiência no desenvolvimento de web sites, residente na cidade de João Pessoa - PB.

Blog

Siga-me no twitter

Assinar Feed RSS

Retirar o pontilhado dos links

// 12.06.2007
CSS


Este código é muito útil, por exemplo quando usamos um menu que tem uma imagem e um texto com indent, quando é clicado aparece o pontilhado do botão até o final da página. Para evitar isso utilize o seguinte código no seu arquivo CSS.

a:focus {
  outline: none;
  }

Fonte: Blog do Maujor

Update
Conforme lembrado por João Paulo, esse pontilhado só aparece no Firefox. :)

Posts Relacionados


13 comentários para “Retirar o pontilhado dos links”

  1. Rodrigo Medeiros disse:
    12 de junho de 2007 às 10:36 am

    Esse cara é desenrolado mesmo. Vlw ai pela dica.

  2. Érika Focke disse:
    12 de junho de 2007 às 10:38 am

    Eita massa! eheheheh bombou horrores hehehe

  3. João Paulo Fechine Sette disse:
    12 de junho de 2007 às 10:46 am

    Eita, essa eu não sabia…
    Parabéns José!

    Estou sempre por aqui para dar uma olhada,
    abração!

    :)

  4. Aguinelo Pedroso disse:
    12 de junho de 2007 às 11:40 am

    Muito boa dica, parabéns pelo blog

  5. Luany disse:
    18 de junho de 2007 às 9:01 pm

    e pra aparece o pontilhado???

  6. José Carlos Araújo disse:
    20 de junho de 2007 às 8:14 am

    Luany, nesse caso ele foi ocultado para o firefox, por padrão ele é habilitado, caso deseje que aparece não precisa fazer nada.

  7. Augusto disse:
    25 de julho de 2007 às 7:50 am

    Outra opção é usar o overflow:hidden no item. O pontilhado continua aparecendo, mas de forma correta.

  8. José Carlos Araújo disse:
    28 de julho de 2007 às 10:09 am

    Olá Augusto, a função do overflow é definir o que acontece quando o conteúdo excede as dimensões do elemento, exemplo em uma div com altura fixa para quando exceder aparecer a barra de rolagem. Obrigado pelo comentário.

  9. Augusto disse:
    6 de agosto de 2007 às 12:37 pm

    Conforme especifica o próprio Maujor:

    “Molduras dinâmicas (a propriedade ‘outline’ ) permitem aos usuários (p. ex., com baixa visão) criar molduras dinâmicas em volta de conteúdo sem alterar o layout, mas ressaltando informações.”

    Não acho interessante simplismente retirar o outline. Utilizando o overflow, estaríamos respeitando sua função, já que o indent negativo faz o conteúdo ultrapassar suas dimensões.

  10. Amanda Campos Costa disse:
    10 de dezembro de 2007 às 12:28 pm

    Nossa, muito simples. Por isso que eu amo CSS \o/

  11. Pedro Sales disse:
    21 de julho de 2009 às 5:18 pm

    Coitado dos usuários portadores de necessidades especiais. Nunca retire o “pontilhado” dos links, eles servem como guias nos browsers para deficientes visuais.

  12. José Carlos Araújo disse:
    21 de julho de 2009 às 11:35 pm

    Isso é verdade Pedro, o quesito Acessibilidade será afetado.

  13. flagner disse:
    13 de maio de 2011 às 3:27 pm

    Aewwwwwww, tava procurando por isso !!
    Eita pontilhado que tava me incomodando,

    Obrigadoo !
    xD

Deixe um comentário


(*) Campos obrigatórios



W3C valid XHTML 1.1 and CSS 2.1

José Carlos Araújo | Web Designer