How to Reset Default Button Style in Firefox 4 +

How to reset default button style in Firefox 4 +

I actually found the solution myself.

In your url field type: resource://gre-resources/forms.css - this will open forms.css for FF4 - and search for the following selector

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

Now just put that in your main stylesheet like:

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:0;padding:0;margin:0;}

It shouldn't be overriding your css anymore. Also note that if you haven't defined any font style for your inputs FF won't inherit body font styling.

How to style button inputs to be identical in Chrome and Firefox?

I have concluded that the only way of ensuring that button/submit inputs remain identical across browsers is to recreate them using divs. Creating button inputs is easy since you can attach click events onto divs the same way as on buttons. Creating submit inputs is barely any harder. I solved it using jQuery by declaring a class, for instance 'submit', and adding the submit button functionality to all elements that have that class on load. Here's an exampe:

// On page load:
$('.submit').on('click', function(e) {
    $(this).closest('form').submit();
});

Divs with the submit class that are not in a form will do nothing when clicked.

If you add tabindex="n" (where n is a number) to the element, it can also be focused using tab, just like a normal button. You can also style it to show that it's focused by using the :focus css pseudo-class. Then you could use space or enter to click the button with this event handler:

$('.submit').on('keypress', function(e) {
    if (e.keyCode == 13 || e.keyCode == 32)
        $(this).closest('form').submit();
});

_{(I wrote that last snippet in a hurry and haven't actually tested it. If you find an error in it or test it successfully please edit this answer accordingly.)}

How do I remove the default padding from a button in Firefox?

Like well explained here: "Firefox adds a special padding to inputs and button elements."

This actually fix your issue.

http://jsfiddle.net/2fm31sd7/1/

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

Mozilla Firefox input radio button styling and default settings

I wouldn't advise styling radio buttons to look like checkboxes but since you ask might I suggest that you approach it a different way...

Position the label after the input, hide the input (we'll use just the label to toggle it), then use the Adjacent Sibling Selector to style the label adjacent to the :checked input:

Like this:

input[type="radio"] {

    /* hide the real radio button - but not with display:none as it causes x-browser problems */

    opacity:0.2;

    position:absolute;

    /*left:-10000;*/

}

input[type="radio"] + label {

    cursor: pointer;

}

/* N.B You could use a child span in the label if you didn't want to use the :after pseudo */

input[type="radio"] + label:after {

    display:inline-block;

    content:"✓";

    font-size:30px;

    line-height:45px;

    text-align:center;

    color:#ccc;

    background: #ccc;

    width: 45px;

    height: 45px;

    vertical-align: middle;

    margin: 0 10px;

    border-radius:50%;  

    border:1px solid grey;

}

input[type="radio"] + label:hover:after {

    background: #aaa;    

}

input[type="radio"]:checked + label:after {

    color:#fff;

    background: #555; 

    box-shadow:0 0 8px deepSkyBlue;

    border-color:white;

}

<form>        

    <input id="a" name="myradio" type="radio" />

    <label for="a">One</label>

    <input id="b" name="myradio" type="radio" />

    <label for="b">Two</label>

</form>

a:hover, a:active, a:focus {
   border: 1px dotted #f00;
}