Modify div onclick outlining in firefox

Question

In Firefox, whenever a link is clicked, there is a dotted outline around the item.

Is it possible to modify it so that I can select the div that is being highlighted, or customize the area that it outlines?

Answer 1

You can turn the a element into a block element so that it behaves like a div (style="display: block")

Answer 2

I think you will want to check out Removing Dotted Links.

If you want to retain the dotted border for tab-based navigation, apply this to a:active. This still allows the indicator to appear when focused by keyboard, but hides when mouse activated:

a:active
{
    outline: none;
}

For all links:

a
{
    outline: none;
}

For Mozilla-based browsers only:

:focus
{
    -moz-outline-style: none;
}

That only answers half your question though. To change the area the dotted outline outlines, you'll probably have to write some JavaScript to change the border or outline of the element you want to outline based on the click event of the link.

Answer 3

In CSS:

a:active{outline:0;border:(customize the border around the active link)}

For a div (using JQuery):

$(function(){ 
    $('div#your-id').click(function(){ 
        $(this).css({'enter the CSS rules for the div here'}); 
    }); 
});

http://docs.jquery.com/CSS/css#name