How to hide the dotted border outline on focused elements in HTML, using CSS

While working on a web application for data entry, I had to scour the net for a way to hide the dotted border that appears when an element is focused on a web page. Here are my findings.

First, the obligatory disclaimer – I do understand that the dotted border is for accessibility purposes and should be left in place under normal circumstances. However, in this case we already had a replacement in place – when an element receives focus it is styled differently, using a very distinct background color. And this applies to all elements, regardless of whether they were selected by mouse or keyboard. So the dotted border is redundant, and somewhat distracting.

To further clarify the question, these are the dotted borders I refer to:
save-outline and cancel-outline

While the solution needed to be usable across browsers, the target browsers where well defined – modern versions of Firefox and Chrome, and IE 7 or newer. I first came across this question on stackoverflow.com which pointed me to using outline:none. Then this one helped with Firefox compatibility. And then I saw this post which provides a number of different techniques.

I ended up using the following CSS, which seems to cover most bases. As I didn’t see this combination on other sites I thought I would post it myself. It doesn’t apply to the select element in Firefox and IE7. Testing was done on Windows XP.

/* hide the dotted lines around an element when it receives focus */
* { _noFocusLine: expression(this.hideFocus=true); } /* ie7 */
::-moz-focus-inner {border:0;}	                     /* firefox */
:focus {outline:none;}                               /* ie8, chrome, etc */

This entry was posted in Technology and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. Posted 2011/02/22 at 2:29 pm | Permalink

    Excellent Working well thanks…………..

  2. Paul Willis
    Posted 2011/04/16 at 11:34 pm | Permalink

    Hi,
    Where do you put the script and which script is best?
    Thansk

  3. Posted 2013/08/04 at 11:28 am | Permalink

    Thank you for this informative post :) helped me out.

One Trackback

  1. [...] How to hide the dotted border outline on focused elements in HTML, using CSS By LESSAN Credits: http://www.lessanvaezi.com/how-to-hide-the-dotted-border-outline-on-focused-elements-in-html-using-c… [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting