Remove blue box around buttons. HTML

Question

I am currently making a site and adding the menu buttons. My problem is that when ever i click a button there is a blue box around it. I have try to at

 <button type="button" style="border:none; border-style:none"></button>
 <li style="border:none; border-style:none"></li>
 <a style="border:none; border-style:none" href="#">Home</a>

And they all don't work. My code is currently..

 <button type="button"><li><a href="music.html">Music</a></li></button>

I have tried all the border = none and tried 0 with both border-style and border-color. Any help would be much appreciated.

score 5 · Accepted Answer · answered Mar 30 '14 at 16:28

5

Try the below CSS style,

button
{
    outline: 0 none;
}

answered Mar 30 '14 at 16:28

Soundar

2,569
1
16
24

Wouldn't outline: none; work just as well? That's what I've done for years. – Sophisticake Mar 30 '14 at 16:29

score 3 · Answer 2 · answered Mar 30 '14 at 16:32

Css outline property may not work all the times . here is a quick solution ;

* {
outline: none;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}

Remove blue box around buttons. HTML

2 Answers2

Linked