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


How to remove border from clicked links

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


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

Täida nõutavad väljad või kliki ikoonile, et sisse logida:

WordPress.com Logo

Sa kommenteerid kasutades oma WordPress.com kontot. Logi välja / Muuda )

Twitter picture

Sa kommenteerid kasutades oma Twitter kontot. Logi välja / Muuda )

Facebook photo

Sa kommenteerid kasutades oma Facebook kontot. Logi välja / Muuda )

Google+ photo

Sa kommenteerid kasutades oma Google+ kontot. Logi välja / Muuda )

Connecting to %s

Blog at WordPress.com.