In Internet Explorer, input fields are a few pixels longer than select boxes; how can I make them the same length?

Question

Given the following code:

<form>
  <input type="text">
  <select>
    <option>Foobar</option>
  </select>
</form>

With the following CSS:

input, select {
  width: 200px;
}

Internet Explorer displays the text input slightly larger than the select box. Is there a way (that hopefully doesn't break compatibility with other browsers) to make them exactly the same width?

Thanks,

gnuvince

Answer 1

You'll have to do this manually when you detect IE

input, select {
  width: 200px;
}

.ie-select {
  width: 220px;
}

Answer 2

Use a conditional comment:

<style type="text/css">
input, select {
    width: 200px;
}
</style>
<!--[if IE]>
    <style type="text/css">
    select {
        width: 195px; /* Resize down hwever much is needed to make them even. */
    }
    </style>
<![endif]-->

More on Conditional Comments

Answer 3

input {
    width: 200px;
}
select { /* for IE */
    width: 206px;
}
html > /**/ body 
select { /* for other browsers */
    width: 204px;
}

Alternatively: http://stackoverflow.com/questions/2886392/css-how-to-set-the-width-of-form-control-so-they-all-have-the-same-width/2886652#2886652