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!

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

Friday, January 29, 2010 12:47 AM by Mike

Thanks, this was helpful to get rid of it in Firefox. But Safari is still giving me a big blue border.  Any thoughts?

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

Friday, January 29, 2010 1:23 AM by Mike

Ignore my previous question. It did work for Safari. Needed to hit refresh even though it was a fresh page right from Dreamweaver.  Thanks

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

Tuesday, February 23, 2010 4:59 AM by dagobert dirk

(but internet explorer newsest version still renders dotted focus border)

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

Thursday, July 01, 2010 2:31 AM by sirfamol85123

Thanks dude!! it work for me on IE 8.

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

Wednesday, July 21, 2010 2:03 PM by Glenn Pennock

pitty, did not worked for win7/ie8

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

Monday, May 16, 2011 12:00 AM by weblogs.asp.net

Css get rid of dashed border on focused elements.. Awful :)

Leave a Comment

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