…meie igapäevast IT’d anna meile igapäev…

2010-05-05

How to remove border from clicked links

Filed under: CSS,HTML,Nipid — Sander @ 12:02:54

SelectedRaamid

By default, all browsers draw a border around the clicked links – Firefox and IE do a dotted line (first on the image on right) and Chrome (second) has an orange border. While normally this is not an issue – they do it to help user understand that the link has been clicked and is now active. In short, it is an accessibility and usability feature, meant to persist while the page is loading after the link was clicked.

Second (and for some people, more important functionality), is moving between the links using tab key. The outline helps to see what link is currently selected, so user can press enter to navigate.

However, there are times when we do not want or need the border around the link – accordion menus (which are on the picture above) are a perfect example. When user clicks on a menu item, we already have designs in place that show him which item became active – in case of accordion menus, the sub-items become visible.

We also may have tabs, to which we add  “active” class after click, distinguishing the selected element from its siblings – or a myriad of other Web 2.0 features, where the border just becomes unneeded ugly reminder of the time when JavaScript and CSS did not exist.

How does browser apply the border? Easy – it simply applies default design for :focus CSS pseudo-selector. And herein lies the key to removing the border – we override the style:

a:focus { outline: none; }

Or, to remove it from all selectable elements (accordion tabs are usually header tags, tab elements are list elements etc):

:focus { outline: none; }

1 kommentaar »

  1. Päris lihtne, aga efektiivne nipp.

    kommentaar kirjutas Ets — 2010-05-11 @ 23:39:42 | Vasta


RSS feed for comments on this post. TrackBack URI

Lisa kommentaar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Muuda )

Twitter picture

You are commenting using your Twitter account. Log Out / Muuda )

Facebook photo

You are commenting using your Facebook account. Log Out / Muuda )

Google+ photo

You are commenting using your Google+ account. Log Out / Muuda )

Connecting to %s

Create a free website or blog at WordPress.com.