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;
}