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

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

<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?

 Dhiraj20 мая 2012 г., 09:40
 Question Overflow19 сент. 2015 г., 16:08
@GregD, оба вопроса мои, они могут выглядеть одинаково, но они не дублируют друг друга. Другой вопрос относится к проблеме, которая возникла у меня при принятии выбранного ответа на этот вопрос.
 GregD19 сент. 2015 г., 22:47
@QuestionOverflow - хорошо, нет проблем.
 Question Overflow20 мая 2012 г., 09:43
@DhirajBodicherla: я думаю, что это не отвечает на мой вопрос. Является ли?
 GregD18 сент. 2015 г., 13:33

Ответы на вопрос(3)

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

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

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

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

 Question Overflow20 мая 2012 г., 10:04
Но как обрушить это? Могу ли я иметь две максимальные ширины?
 20 мая 2012 г., 10:06
Браузер делает все хруста.
 Question Overflow20 мая 2012 г., 10:09
Очевидно, что max-width не работает с тегом select. Я использую последнюю версию Firefox, не уверен насчет остального.
 Question Overflow20 мая 2012 г., 10:16
@FelipeAlsacreations: хорошая мысль. Спасибо, я обязательно посмотрю на медиа-запросы. Можем ли мы получить подтверждение того, чтоmax-width на выбор работает в других браузерах. Просто да / нет подойдет. Благодарю.
 20 мая 2012 г., 10:12
Вы можете иметь разные значенияmax-width (auto включены) в различных ситуациях с помощью Media Queries. Последнее поможет вам управлять тем, что вы считаете «узким / широким окном браузера»; для вашего конкретного дизайна, если это необходимо. Несвязанные браузеры имеют много свободы, когда они связаны с формами. Как параметры обрезки больше, чем выберите в IE6 / 7 ...
Решение Вопроса

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

 20 мая 2012 г., 09:50
@BenHuh: Извините. Позвольте мне попробовать еще раз.
 16 февр. 2018 г., 23:52
Я только что проверил это в 2018 году, и я не вижу разницы между двумя методами в Chrome.
 20 мая 2012 г., 09:54
@BenHuh: это нормально?
 Question Overflow20 мая 2012 г., 09:47
Я не думаю, что вы поняли мой вопрос. Ты умеешь читать снова? Благодарю.
 Question Overflow20 мая 2012 г., 10:00
Используя ваше решение, тег select будет длиннее необходимого в широком окне браузера.

Ваш ответ на вопрос