Изменение высоты опций выпадающего списка - CSS, Javascript

Можно ли изменить высоту между двумя параметрами с помощью css?,

См. иллюстративный пример. Высота между вариантом Cash and Credit Card

Пожалуйста, следуйте рисунку.

Примечание: поддержка Chrome только

С уважением.

Ответ 1

Никто больше не помнит optgroup? Редко используется, но тем не менее поддерживается в каждом браузере.

<select>
  <optgroup label="Cash">
    <option>Cash</option>
  </optgroup>
  <optgroup label="Other">
    <option>Credit Card</option>
    <option>Credit Note (R)</option>
    <option>Gift Voucher</option>
    <option>Cheque</option>
  </optgroup>
</select>

Ответ 2

Другой вариант - вы можете изменить размер шрифта, который будет больше.

.myOption {
    font-size: 20px;
}

Ответ 3

попробуйте это

   option{

     padding:5px 0;
   }

Пример с заполнением Jsfiddle

.dis option{
 padding:5px 0;

 }

HTML

<select class="dis">
  <option>1erwer</option>
  <option>2wwerwer</option>
  <option>3werwer</option>
  <option>4werwer</option>
  <option>5wrwer</option>
</select>

увеличение пробела между двумя параметрами невозможно

, но есть сложный способ

<select class="dis">
  <option>1erwer</option>
  <option>2wwerwer</option>
  <option>3werwer</option>
  <option disabled="disabled" ></option> <---trick 
  <option>3werwer</option>
</select>

Ответ 4

Не определенно. Вы не можете управлять стилем списков опций. Однако вы можете использовать что-то вроде select2 (https://select2.github.io/examples.html), который создает выбор фасадов, которые вы можете стилить.

Ответ 5

используйте специальный шрифт (очень маленький) и используйте "font-size:200%"; важно: только для варианта

или

Самый простой способ: опция {увеличить: 1,5} сделано!

Ответ 6

Вы всегда можете использовать ul вместо опции select

<ul class="dis">
  <li>1erwer</li>
  <li>2erwer</li>
  <li>3erwer</li>
  <li>4erwer</li>
  <li>5erwer</li>
</ul>