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

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 2

How about box-sizing: border-box ?

Answer 3

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

input, select {
  width: 200px;
}

.ie-select {
  width: 220px;
}

Answer 4

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

Alternatively: CSS: how to set the width of form control so they all have the same width?