Изменить ширину элемента SELECT для каждого активного параметра ⇐ Html

[Anonymous]

У меня есть элемент SELECT , который выходит непосредственно против ввода. По большей части выглядит великолепно, но в некоторых вариантах слишком много пробелов. Кажется, что, если я сам не установил какую -то статическую ширину, выберите < /code> расширить ширину его самой большой опции. Я бы спрашивал, возможно ли это, но я знаю, что это как -то, потому что я видел это на домашней странице Amazon на их строке поиска. Поведение Select , которое управляет их поисковым фильтром, по сути, является тем, что я пытаюсь воссоздать на своем веб -сайте, но я не могу понять, что именно они сделали. Вот код, который воспроизводит основное представление о том, что у меня есть в настоящее время. < /P>

html: < /p>


All
Consoles
Games
Equipment


< /code>

css: < /p>

select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
}

input[type='text'] {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
min-width: 300px;
}
< /code>

У меня есть скрипка со всем здесь. Я хочу сделать это в чистом HTML и CSS, если смогу. Любая помощь высоко ценится.

Подробнее здесь: https://stackoverflow.com/questions/536 ... ive-option