why is input button's size different from css style?

Question

I am working on an electron app on macOS.

In the CSS file, I specified the input size to be 21px height.

CSS

input {
    float: left;
    margin-bottom: 10px;
    height: 21px;
}

HTML

<input type="button" value="Choose a file" id="fileInput">
<br style = "clear:left">

But in the app, the button seems to be 18 px height.

I checked in dev tools. the element sizing looks like this.

Why is the input button size different from the height specified in the CSS file. Was it due to the "margin-bottom" properties I specified?

Update:

I tried to add the !important tag, did not work.

Checked CSS files, no 18px specified anywhere.

Are there any other possibilities the input button size affected/overwritten by other CSS attribute, float for example?

Update 2:

I tried the app on Windows system, the button has the right size of 21px.

The issue seems to be a macOS specified issue.

Answer 1

You code perfectly sets the height in all major browsers.

Maybe a CSS framework overrides the default style. Try to add the !important tag behind the height attribute like so: height: 21px !important; . Please note , that this is not best practice explanation found here .

If you need further help, please let us know whether you use a CSS framework (maybe some JS code could also override it) and which browser you're using.

Answer 2

Check if it is getting overridden by any other height which is specified to 18px . and as people are suggesting use of "!important" try to avoid using it . Try with css selectors. to make it more specific to your input field.