Как установить ту же ширину для ввода текста в формате HTML и выпадающего ввода

У меня есть два элемента HTML, например:

<input type="text">

и

<select>
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
  <option>Grapes</option>
</select>

Я не могу сделать их одинаковой ширины. Независимо от того, какую ширину я указываю для BOTH элементов, 100% или 200 пикселей или что-то еще, выпадающее изображение всегда примерно на 5 пикселей меньше текстового поля. Это происходит в IE, Firefox и Chrome - в WINDOWS.

Как установить, чтобы они имели одинаковую ширину?

Решение

input, select
{
    -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-sizing:border-box; 
}

Ответы

Ответ 1

Взгляните на этот рабочий пример

Вы можете изменить CSS только для его сохранения:

input, select
 {
    width:250px;        
 }

Ответ 2

Почему бы не сделать это?

input[type="text"] {
   width: 200px;
}

select {
   width: 205px;
}