March 2, 2012
How to remove blue border around the button in Firefox?
Question by masato-san
I’m using Firefox 10, Windows 7 and not sure older version but when I clicked the button, the blue border appears around the button.
I created the example below.
I removed the dotted line with css below but I also do not want blue border. I can’t figure how to remove it or is it even possible to remove?
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner
{
border: none;
outline: none;
}
below didn’t work…
input[type="button"]:visited
{
outline: none;
border: none;
}
This is evil blue border I’m talking about.
Answer by Starx
That is the UI of Firefox, whether themed or none. Not something you got from coding.
If it is troubling you so much you can reset it and define your own style. Here is a reset rule for that.
button { background: none transparent; border: none; }
And you can add your styling on it later on. Here is a demo for that. You can define custom states for hover, visited , active like the way you want.
