html: How to prevent dotted rectangle around navbar-brand

samedi 2 juillet 2016

I use bootstrap and have a navbar link like this

<a class="navbar-brand" href="#"><img id="logo" src="img/logo.png"> My Site</a>

I have a custom css

.navbar-brand:focus, .navbar-brand:hover {
    text-decoration: none;
    color: rgba(255,0,0,0.85);
}

I am not able do following:

On any browser, reset the link to original state when clicked. The color of text remains the color of hover specification. I need to it reset to original state.
Only on FIREFOX, there is a dotted rectangle around .navbar-brand when clicked. Its not there on CHROME, SAFARI.

Can you please provide pointers?

html