Reply to comment

Jun 04 2010

Nice CSS to remove links's outline but keep full accessibility

gagarine tag

Links get a dashed box when you click on them. This is ugly specially if your link it's an image.

This dash actually show witch link is on focus. Useful if you navigate with tab...

This CSS remove outline but keep accessibility by hidden it only when the user click on the link (the new page is loading).

a:focus {
   outline: 1px dotted;
}
a:active {
  outline: 0;
}

Enjoy!

Reply

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
By submitting this form, you accept the Mollom privacy policy.