CSS border appears on click

Question

LOGOUT

I have this simple logout button on the right (blue coloured) button and whenever I press the logout button, that border appears

I have tried the following CSS styles:

a:active
{
    border-style: none;
    border: 0px;
}

and these have been tried on all <a> tag possibilities like hover, active..

Any idea what might be the cause?

this is the Jsfiddle link

For accessibility reasons I wouldn't remove this. People without mice will not know which links/buttons they are on unless there is some sort of outline. — Leeish, Sep 23 '14 at 21:20
This is mostly for my thesis website, it's not going to actually out to public. And if you press 'TAB' , around the words log out a border will still appear — DodoSombrero, Sep 23 '14 at 21:26

score 30 · Accepted Answer · answered Sep 23 '14 at 21:20

30

It's not a border, it's the outline.

#logoutButton {
    outline: none;
}

Demo http://jsfiddle.net/v1x29f9h/1/

answered Sep 23 '14 at 21:20

Arbel

Worked like a charm, thanks. Guess border-style wasn't the right choice here – DodoSombrero Sep 23 '14 at 21:24
1

@DodoSerebro You are welcome! Glad to be of help to you. – Arbel Sep 23 '14 at 21:25
Hey thanks a lot. Your answer was a big help – Megha Nov 06 '16 at 13:28

score 3 · Answer 2 · answered Sep 23 '14 at 21:20

3

It is outline: none;. The border would follow the border-radius path.

answered Sep 23 '14 at 21:20

Cohars

2 Answers2