Making SELECT and INPUT fields the same width

If you’ve done much work with CSS and HTML forms you’ve no doubt noticed that often your <SELECT> and <INPUT> elements are not quite the same width, despite attempts to make them so in your stylesheet.

Here’s some example CSS…

.form-text {
        width:312px;
        padding:4px;
        color:#000000;
        background-color:#ffffff;
        border:solid 1px #d7d7d7;
        font-family:Arial, Helvetica, Sans-Serif;
        font-size:10pt;
        text-align:left;
}

…and here’s the corresponding form elements

Select element

Although it’s browser dependent, the chances are the two elements above are not the same width despite having specific width and padding properties.

A solution?

Then we discovered this:

.form-text {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
}

Combining the two sets of CSS above results in form elements that look like this:

Select element

Depending on your choice of browser, there’s a good chance the two elements above are now the same width.

What is the “box-sizing” property?

An explanation of the “box-sizing” property from the W3Schools website is as follows:

“The box-sizing property allows you to define certain elements to fit an area in a certain way. For example, if you’d like two bordered boxes side by side, it can be achieved through setting box-sizing to ‘border-box’. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.”

This “fix” appears to work in Internet Explorer 8 and above, Firefox, Safari and Chrome. Without it, we could never find a way of making the elements the same width even with specific width, padding, margin and border properties.