Como posso remover o contorno das imagens de hiperlinks?


96

Quando usamos a Substituição de Texto usando CSS e fornecemos um teste de indentação negativo, isto é text-indent:-9999px. Então, quando clicamos nesse link, a linha pontilhada aparece como na imagem de exemplo abaixo. Qual é a solução para isso?

insira a descrição da imagem aqui


3
Não remova isso, ele está lá por uma questão de acessibilidade.


Duplicado: stackoverflow.com/questions/1142819/… (mas consulte os comentários de acessibilidade acima!)
JohnB

Eu descobri isso usando o termo de pesquisa errado. Recomendo a todos que
estiverem

Respostas:


167

Para Remover contorno para tag âncora

a {outline : none;}

Remover contorno do link da imagem

a img {outline : none;}

Remover borda do link da imagem

img {border : 0;}

1
Obrigado, Discover. Isso vinha me incomodando há muito tempo - não apenas as fotos com hiperlink no IE, mas as fotos normais sem hiperlink. Foi irritante até que encontrei sua resposta (via Google, não Stack, por incrível que pareça).
Jason Weber

25

Você pode usar a propriedade CSS "contorno" e o valor "nenhum" no elemento âncora.

a {
outline: none;
}

Espero que ajude.



9

Observe que os estilos de foco existem por um motivo: se você decidir removê-los, as pessoas que navegam pelo teclado não sabem mais o que está em foco, então você está prejudicando a acessibilidade do seu site.

(Mantê-los no lugar também ajuda os usuários avançados que não gostam de usar o mouse)


Não estamos removendo: estilo de foco. apenas adicionando contorno de estilo: nada disso. outro estilo padrão estará lá.
Wasim Shaikh

1
Qual é o "outro estilo padrão" então? Pelo que eu sei, há apenas uma, a linha pontilhada.
Wolfr

1
Ok .. Pode ser que possamos usar o estilo Diffrent para leitores de tela. esta pode ser uma solução para acessibilidade.
Wasim Shaikh

Não apenas os leitores de tela usam o contorno, algumas pessoas também gostam de navegar em sites que usam seu teclado.
user2019515

8

Existe o mesmo efeito de borda no Firefox e no Internet Explorer (IE) , ele se torna visível quando você clica em algum link.

Este código corrigirá apenas o IE:

a:active { outline: none; }.

E este vai consertar o Firefox e o IE :

:active, :focus { outline: none; -moz-outline-style: none; }

O último código deve ser adicionado à sua folha de estilo, se desejar remover as bordas do link do seu site.


1
Obrigado Mike, esta é realmente uma boa resposta. mas Usando -moz-outline-style: none; não é CSS válido. ainda esta é uma boa opção
Wasim Shaikh

5

inclua este código em sua folha de estilo

img {border : 0;}

a img {outline : none;}

3

Espero que seja útil para alguns de vocês, pode ser usado para remover o contorno de links, imagens e flash e do MSIE 9:

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

O código abaixo é capaz de ocultar a borda da imagem:

    img {
    border: 0;
    }

Se você gostaria de oferecer suporte ao Firefox 3.6.8, mas não ao Firefox 4 ... Clicar em uma entrada type = imagem pode produzir um contorno pontilhado também, para removê-lo nas versões antigas do firefox o seguinte resolverá:

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

O IE 9 não permite, em alguns casos, remover o contorno pontilhado ao redor dos links, a menos que você inclua esta metatag entre e em suas páginas:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

@Sparky, acredito que devemos oferecer uma resposta que responda à pergunta, contando sobre como fazer isso na maioria dos navegadores usados, incluindo o MSIE, pois foi um navegador amplamente usado em 2014 e informações sobre a metatag MS e CSS que podem ser usados ​​para Somente MSIE Foi apenas parte da minha resposta oferecer suporte para a maioria dos navegadores, incluindo MSIE ... A pergunta NÃO era sobre HTML ou CSS válido do W3C ...
jagb

@Sparky +1 porque isso é verdade e nunca devemos confiar em MS css / html / meta tags, pois eles raramente pensam nos padrões W3C .... Eu não disse que é bom usar as meta tags da Microsoft e seu código CSS como o o único navegador que suporta o código MS é o MSIE e os navegadores MS relacionados. Conforme a resposta solicitada à pergunta "Como posso remover o contorno em torno das imagens de hiperlinks?"
jagb

Simplesmente fiz um comentário declarando minhas observações.
Sparky

No entanto, gostaria de saber se você poderia citar uma fonte para sua afirmação de que essa metatag é necessária em "alguns casos" ; e quais seriam esses casos.
Sparky

Leia o site da Microsoft para obter algumas informações, mas não todas. Há muitas perguntas aqui no Stack Overflow, algumas das perguntas podem ser listadas ao lado desta pergunta na barra direita. Em alguns casos, o MSIE / EDGE não pode exibir o conteúdo da página porque o navegador não oferece suporte, em "alguns casos" a metatag compatível com X-UA é útil para visitantes do MSIE / EDGE. há mais informações, uma correção que funcionará está aqui . Espero que sejam informações úteis para você
jagb

3

Este é o último que funciona no Google Chrome

:link:focus, :visited:focus {outline: none;}

1

-moz-user-focus: ignore; em navegadores baseados no Gecko (você pode precisar! importante, dependendo de como ele é aplicado)


1

Use assim para HTML 4.01

<img src="image.gif" border="0">


1

Você pode colocar overflow:hiddenna propriedade com o recuo do texto, e a linha pontilhada, que se estende para fora da página, desaparecerá.

Eu vi alguns posts sobre como remover todos os contornos. Tenha cuidado ao fazer isso, pois você pode diminuir a acessibilidade do site.

a:active { outline: none; }

Eu pessoalmente usaria este atributo apenas, já que se o :hoveratributo tivesse as mesmas propriedades css, isso evitaria que os contornos fossem exibidos para pessoas que estão usando o teclado para navegação.

Espero que isso resolva seu problema.



0

Aposto que a maioria dos usuários não é o tipo de usuário que usa o teclado como controle de navegação. É então aceitável irritar a maioria dos seus usuários por um pequeno grupo que prefere usar a navegação com teclado? Resposta curta - depende de quem são seus usuários.

Além disso, não vejo essa experiência da mesma forma no Firefox e no Safari. Portanto, este argumento parece ser principalmente para o IE. Tudo realmente depende da sua base de usuários e do nível de conhecimento deles - como eles usam o site.

Se você realmente deseja saber onde está e é um usuário de teclado, pode sempre olhar para a barra de status enquanto digita no site.


0

Isso funciona perfeitamente para mim

a img {border:none;}


0

Qualquer imagem que tenha um link terá uma borda ao redor da imagem para ajudar a indicar que é um link com navegadores mais antigos. Adicionar border = "0" à sua tag HTML IMG impedirá que a imagem tenha uma borda ao redor da imagem.

No entanto, adicionar border = "0" a cada imagem não seria apenas demorado, mas também aumentaria o tamanho do arquivo e o tempo de download. Se você não quiser que nenhuma de suas imagens tenha uma borda, crie uma regra CSS ou arquivo CSS que contenha o código abaixo.

img {estilo da borda: nenhum; }


0

Se a solução acima não funcionar para ninguém. Experimente também

a {
 box-shadow: none;
}

-1

Não tenho certeza se isso ainda é um problema para essa pessoa, mas sei que pode ser uma dor para muitas pessoas em geral. Concedido, as soluções acima funcionarão em alguns casos, mas se você estiver, por exemplo, usando um CMS como o WordPress, e os contornos estiverem sendo gerados por um plugin ou tema, você provavelmente não terá esse problema resolvido, dependendo de como você está adicionando o CSS.

Eu sugiro ter um StyleSheet separado (por exemplo, use o plug- in ' Lazyest StyleSheet ') e insira o seguinte CSS dentro dele para substituir o estilo forçado do plug-in (ou tema) existente:

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

Adicionando ' ! Importante ' à regra específica tornará isso uma prioridade de gerar, mesmo se a regra puder estar em outro lugar (seja em um plugin, tema, etc.).

Isso ajuda a economizar tempo durante o desenvolvimento. Claro, você pode buscar a fonte original, mas quando você está trabalhando em muitos projetos ou precisa realizar atualizações (onde suas alterações podem ser substituídas [ não sugeridas! ]), Ou adicionar novos plug-ins ou temas, este é o melhor recurso para economizar tempo.

Espero que isso ajude ... Paz!


-9

Sim, podemos usar. CSS redefinido como a {outline:none}e também


a:focus, a:active {outline:none} para as melhores práticas em redefinir CSS, a melhor solução é usar o comum. :focus{outline:none}Se você ainda tiver a melhor opção, compartilhe


20
Não é um pouco rude não aceitar uma das outras respostas, cujo conteúdo o levou à sua conclusão?
Pekka
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.