Aligning text and select boxes to the same width in CSS?

Solution 1:

This is because the <input type="text" /> element has a slightly different default style to the <select> element e.g. the border, padding and margin values may be different.

You can observe these default styles through an element inspector such as Firebug for Firefox or the built-in one for Chrome. Futhermore, these default stylesheets differ from browser to browser.

You have two options:

1. Explicitly set the border, padding and margin values to be the same for both elements
2. A CSS reset stylesheet to be included before your own CSS stylesheets

I would go with option 1. because option 2. requires a lot of work and you'll end up with tons of unnecessary CSS. But some web developers prefer to start from scratch and have complete control.

Solution 2:

This will get you close, but that level of precision is nearly impossible.

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>