The following code:
<input style="height: 80px; width: 200px;" value="test button">
Works fine on Windows, Linux etc. However Mac uses the system button style for <input>
tags. These seem to not be able to be given a custom height (Firefox overrides the system button style so it's fine but Chrome and Safari on Mac have the below problem):
Instead of having a 80px wide and 200px high button there is the Mac button style and a gap on top and below. The width gets set fine.
How do I override this so that Chrome and Safari on Mac show a tall button?
EDIT: Here's what happens on Mac:
Here's what should happen (works on Windows, Linux):
Add :
in your CSS :-)
Here is the list of all values this property can take. By default, WebKit uses a custom style (with fixed height) for the buttons.
Try after adding type="button"