(CSS?) Eliminate "selected" browser lines around a hyperlink?

Attached screenshot from OS X / Firefox 3. Note that the center tab (image) has a dashed line around it, apparently because it was the most recently selected tab. Is there a way to eliminate this dashed line in CSS or JavaScript? (Hmm ... the free image hosting service has reduced the image size, but if you had seen it, you would have noticed a dotted line around the block.)

Screenshot http://www.freeimagehosting.net/uploads/th.fadf78173b.png

+11
css selecteditem
Oct. 06 '08 at 23:38
source share
5 answers

You need to add the following line to your css:

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

(Suppose your tabs are done using element a, of course.)

[edit] At the request of everyone else, for future viewers it should be noted that the outline is necessary for keyboard navigators, as it indicates where your choice is, and therefore gives a hint where the next tab 'should go. Thus, it is not practical to remove this dashed line selection. But itโ€™s still useful to know how you will do it if you consider it necessary.

And as mentioned in the comment, if you are dealing only with FF> v1.5, feel free to leave -moz-outline-style: none;

+21
Oct 06 '08 at 23:47
source share

In your onclick event this.blur ()

or, in particular, set the focus elsewhere.

+4
Oct 06 '08 at 23:40
source share

First try

 *,*:hover,*:focus,*:active { outline: 0px none; } 

However, this will reduce usability.

You want to selectively apply alternative effects where necessary, so that people, such as those who focus primarily on the TAB key, have an idea of โ€‹โ€‹what is currently in focus.

 div.foo:active, div.foo:focus, div.foo:hover { /* Alternative Style */ } 
+1
Oct 06 '08 at 23:49
source share

You can start by looking at: focus and: active pseudo classes, although you probably shouldn't completely remove formatting from these cases, as they are invaluable help for ease of use.

0
06 Oct '08 at 23:40
source share

using

 *:focus {outline:0px;} 

remove styling for inputs and text fields when selected with the mouse. Make sure you add these border styles for these form elements if you decide to remove all outlines on: focus.

0
Feb 21 '13 at 21:15
source share



All Articles