У меня есть элемент 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
