CSS: Get rid of dashed border on focused elements

Disclaimer: This is meant to be use ONLY ff you do NOT want your user to be able to Tab through the links on your site, or if you have already coded the :focus subclasses or onfocus script events for all of the elements in your site that you wish your user to be able to visually tab through.

Do you want to get rid of the dashed border that appears when you click on links, flash controls, etc?

Try this!

 

* 
{
    -moz-outline-style: none;     
    outline-style: none;
    outline-width: 0px;
    outline-color: -moz-use-text-color;
}

 

more later - joel

Published Monday, June 22, 2009 6:12 PM by joelvarty

Comments

# re: CSS: Get rid of dashed border on focused elements

Tuesday, June 23, 2009 3:47 AM by webbes

"outline-syle: none;"

shouldn't that be:

"outline-style: none;"

cheers,

Wes

# re: CSS: Get rid of dashed border on focused elements

Tuesday, June 23, 2009 9:15 AM by Joel Varty

You are correct.  Thanks :)

# re: CSS: Get rid of dashed border on focused elements

Tuesday, June 23, 2009 12:03 PM by Trevor Davis

You should be careful doing that on all elements. The outline property is very useful for people navigating with a keyboard.

# re: CSS: Get rid of dashed border on focused elements

Tuesday, June 23, 2009 12:08 PM by Josh

wow I've been wondering for YEARS how to do this!

thanks!

Leave a Comment

(required) 
(required) 
(optional)
(required)