Изменить ширину элемента выбора для каждой активной опции ⇐ CSS

[Anonymous]

У меня есть элемент select, который расположен прямо напротив ввода. По большей части это выглядит великолепно, но в некоторых опциях слишком много пробелов. Похоже, что если я сам не задаю статическую ширину, select расширяется до ширины самого большого параметра.

Я хочу сделать так, чтобы опция выбора занимает ровно столько же ширины, сколько отображаемая в данный момент опция. Я бы спросил, возможно ли это, но я знаю, что это возможно, потому что видел это на домашней странице Amazon в их строке поиска. Поведение select, которое управляет фильтром поиска, по сути, является тем, что я пытаюсь воссоздать на своем веб-сайте, но не могу точно понять, что они сделали. Вот код, который воспроизводит основную идею того, что у меня есть на данный момент.

HTML:

Код: Выделить всё

All
Consoles
Games
Equipment

CSS:

Код: Выделить всё

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

Я тоже здесь со всем разбираюсь.

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

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