0

I'm trying to create a website for myself and just ran into this issue:

picture1 picture2

As you can see there is some kind of selection visible in both images which I don't want to be displayed.

The first image is taken after I clicked the menu item. The second image is taken after the first when I additionally move the mouse over it.

These menu items are shown in a table. I am using FireFox 3.6.10.

Does anybody have an idea how to get rid of these selections?

2 Answers 2

3

Check out the outline CSS property. You should specify outline: none for your links in this case. The outline indicates that the given element has focus. You should provide something instead to make keyboard-only navigation possible.

1
  • Thanks, it is working. And thanks to Deniz for pointing out that it might not work on all browsers.
    – Maaalte
    Sep 30, 2010 at 11:49
2

If you remove focus from the link when the user clicks it, you will effectively get rid of that box. However, many people advise against this because it is considered bad practice and isn't very accessible.

Anyways, if you want to do it and don't mind JQuery, you can use this:

$('a').click(function () { $(this).blur() });

As "elusive" pointed out, you can also use the CSS outline property to prevent it, but that doesn't work on all browsers. (Read: IE7 and older.)

1
  • Note that this removes the focus of the element completely, so if you are keyboard navigating and click on a button that opens a new page, your selection is lost. Also this does not remove the selection while keyboard navigating (which is not something you should do, as not knowing which element is selected leads to bad UX) Nov 18, 2019 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.