Remove dotted line under button

Question

I have a image button in my nav bar but I'd really like to remove the dotted line under the link.

The left arrow is the button which contains the link and as you can see under it tis dotted line appears.

This is the code for adding the navbar and button:

<div id="navbar"> <a href="reList/holder.html"><img src="images/bk.png" alt="Index"/></a> 

I've tried:

<div id="navbar"> <a href="HB/suit.html"><img src="images/bk.png" alt="Index" onfocus="if(this.blur)this.blur()"/></a> 

But it didn't seem to do anything.

Answer 1

From the limited information in the question, I'd suggest that you might be looking for:

#navbar :focus {
    outline: none;
}

This selector will style all elements that are focused by the user that are descendants of the element with the id of navbar.

Bear in mind that it's better not to simply remove the outline, but offer an alternative styling to give those users that use the tab button to navigate a visual indication of where they are on the page.

For example:

#navbar :focus {
    outline: none;
    background-color: #ffa;
}