Button text vertical align and focus outline in Firefox

January 23rd, 2013 by Alex Leave a reply »

You may see that bug on some buttons having the text displayed too low on a <input type="submit" /> or other <button>s. The fix is very simple, all you need to do is clear padding with a -moz pseudo selector

input::-moz-focus-inner
{ 
    padding: 0;
}

And with same pseudo selector you can clean the outlines that appear after focusing the button, for all types of buttons it may be something like this:

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

Comments are closed.