Home/ Questions/Q 8077773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T15:34:33+00:00

The following code: <input style=height: 80px; width: 200px; value=test button> Works fine on Windows,

  • 0

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:
Mac input{ height: 200px; } problem
Here’s what should happen (works on Windows, Linux):

Normal input{ height: 200px; }

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0