Как контролировать ширину тега select?

У меня есть список стран, некоторые с очень длинным именем:

<select name=countries>
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

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

Я попробовал min-width: 90%;, но это не сработало. Можно ли это сделать только с помощью стилей CSS?

Ответ 1

ИСПОЛЬЗОВАТЬ style="max-width:90%;"

<select name=countries  style="max-width:90%;">
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

LIVE DEMO

Ответ 2

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

Вместо этого вам нужно использовать max-width. Таким образом, это позволит меню выбора расширить до самого длинного параметра, но если это расширится до вашего максимального значения до 90%, сверните его до этой ширины.

Ответ 3

Добавить обертку div

<div id=myForm>
<select name=countries>
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>
</div>

а затем напишите CSS

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

Надеюсь, это поможет.