Как изменить ширину выпадающего списка?

У меня есть список, и я хочу уменьшить его ширину.

Вот мой код:

<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
  <option value="kg">Kg</option>
  <option value="gm">Gm</option>
  <option value="pound">Pound</option>
  <option value="MetricTon">Metric ton</option>
  <option value="litre">Litre</option>
  <option value="ounce">Ounce</option>
</select>

Этот код работает на IE 6, но не в Mozilla Firefox (последняя версия). Может кто-нибудь, пожалуйста, скажите мне, как я могу уменьшить width выпадающего списка в Firefox?

Ответ 1

Попробуйте этот код:

<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>

CSS

#wgtmsr{
 width:150px;   
}

Если вы хотите изменить ширину параметра, вы можете сделать это в своем css:

#wgtmsr option{
  width:150px;   
}

Возможно, у вас есть конфликт в ваших правилах CSS, которые перекрывают ширину выбранного вами

DEMO

Ответ 2

попробуйте аргумент !important, чтобы убедиться, что CSS не противоречит каким-либо другим стилям, которые вы указали. Также, используя reset.css, вы можете добавить свои собственные стили.

select#wgmstr {
    max-width: 50px;
    min-width: 50px;
    width: 50px !important;
}

или

<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">

Ответ 3

Создайте css и установите значение style="width:50px;" в коде css. Вызовите класс CSS в выпадающем списке. Тогда это сработает.

Ответ 4

Сама ширина выпадающего меню не может быть установлена. Его ширина зависит от значений опций. См. Также здесь (jsfiddle.net/LgS3C/)

Как выглядит окно выбора, также зависит от вашего браузера.

Вы можете создать собственный контроль или использовать Select2 https://select2.org

Ответ 5

Если вы хотите контролировать ширину списка , который падает, вы можете сделать это следующим образом.

CSS

#wgtmsr option {
    width: 50px;
}

Ответ 6

Это:

<select style="width: XXXpx;">

XXX = любое число

Отлично работает в Google Chrome v70.0.3538.110

Ответ 7

Это сработало для меня:

ul.dropdown-menu > li {
    max-width: 144px;
}

в Chrome и Firefox.