Toolroom Tech Blog

Devlopers Digest

In-Browser issues with form element heights

How to apply the same height to form elements in web pages.

Ever tried to apply the same height to a textbox and a select? It's crazy!

The problem is (maybe god knows why) the different boxing model. Try this ... and it should work:

input, select, textarea {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;

Browser compatibility: Opera, Mozilla and Webkit and IE >8