<input> height on Mac
google-chrome, html, macos, safari
Solution
Add :
input[type=button] {
-webkit-appearance: button;
}
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.
Problem
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):