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

Question

Take a look at this JSFiddle example in Chrome and FireFox.

In Chrome, the button should be a tad smaller than in FireFox. I have added the solution CSS from How to reset default button style in Firefox 4 + (which made the button a little smaller) but the button is still bigger in FireFox. The difference isn't very visible in this example, but have a look at how it affects my design.

Chrome:
Chrome screenshot

FireFox:
FireFox screenshot

As you can see the button is thicker in FireFox and is affecting the layout. Is there any way of avoiding this short of using styled divs in place of buttons?

Also, I'm using Meyer's CSS reset stylesheet

score 10 · Answer 1 · answered Jul 23 '12 at 02:52

10

Firefox adds a special padding to inputs and button elements. This takes care of it:

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

answered Jul 23 '12 at 02:52

João Paulo Macedo

15,297
4
31
41

Sorry, didn't see that. -moz-focus-inner is usually what creates the discrepancy between button sizes across browsers. Didn't read through the whole question tbh. – João Paulo Macedo Jul 23 '12 at 03:18

Hubro · Accepted Answer · 2017-02-04T17:26:00.450

3

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.)}

edited Feb 04 '17 at 17:26

answered Jul 27 '12 at 21:08

Hubro

56,214
69
228
381

+1; I hate the fact that browsers make it difficult to style inputs, because I hate recreating all that functionality from scratch. I don't recommend doing this, but sometimes you gotta do what you gotta do. Also, extremely minor semantic improvement, use `$(this).closest('form').submit();` – Scott Rippey Aug 08 '12 at 17:03
Yeah I just read the documentation on both functions, and `closest` is a much better fit for this task. Thanks for pointing it out. – Hubro Aug 09 '12 at 11:53
1

Does keybord focus with the tab key and the pressing enter work with this? – Oskar Berggren Mar 06 '14 at 21:12
@OskarBerggren Not automatically, you have to add `tabindex="n"` to the button and a few extra lines of JavaScript. I updated my answer. – Hubro Feb 04 '17 at 17:26
@Hubro Great, thanks, so many web sites fail to respect de facto standards on this. – Oskar Berggren Feb 04 '17 at 19:23

score 2 · Answer 3 · answered Jul 23 '12 at 03:20

2

Have you by any chance set a line-height on the buttons on your page? You haven't on the fiddle, but line-height's other than normal, aren't accepted on firefox, and some other browser I believe - maybe IE, I'm not sure.

answered Jul 23 '12 at 03:20

João Paulo Macedo

15,297
4
31
41

I haven't touched the `line-height` property. Good thought, but why would that also affect the width of the button? – Hubro Jul 23 '12 at 03:27
On the image the widths don't seem changed to me. Perhaps they are. I'm not sure. – João Paulo Macedo Jul 23 '12 at 03:31
Is your page online? I could take a look at it. – João Paulo Macedo Jul 23 '12 at 03:32
Alas, it is not. But the styles used and issues experienced is identical to the JSFiddle example I provided in my question – Hubro Jul 23 '12 at 03:48
I'm not experiencing the issue with the fiddle. – João Paulo Macedo Jul 23 '12 at 12:14

score 0 · Answer 4 · answered Jul 23 '12 at 02:53

0

Have you tried a CSS reset? I dont have FF on this computer or else I would check if this works.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">

answered Jul 23 '12 at 02:53

Jeff

13,943
11
55
103

I'm already using one, edited it in to my question. Also, JSFiddle normalizes CSS by default. – Hubro Jul 23 '12 at 02:55

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

4 Answers4

Linked

Related