Set actual height for input

So I have this input:

 <input type="number" class="inv_1"/>

And I try to set height:

.inv_1 {
    width: 50%;
    height: 32px;
}

What I expected: an input tag with 32px height. What I got: an input tag with 38px height.

I set it at 26px now, so I get 32px. The question is, can I set actual height? I want that element have the same height as in CSS. Just like divs and buttons which somehow have 32px with that class.

I wish CSS had "actual" properties. For example: "actualheight: 32px" and it's 32px. Same for width, text align, borders, padding, etc. Imagine how cool it is, to get what you wanted, not what you need to fight with.

(UPD: thanks for answers, works perfectly with box-sizing: border-box. Unfortunately I can only "accept" one answer)



Read more here: https://stackoverflow.com/questions/65706971/set-actual-height-for-input

Content Attribution

This content was originally published by r32 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: