javascript - ドロップダウンのオプションの高さを変更する

Question

CSS を使用して 2 つのオプションの間で高さを変更することは可能ですか?

例示的な例を参照してください。現金とクレジットカードのオプション間の高さ

注: Chromeのみをサポートしています

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

Answer 2

特別なフォント（非常に小さい）を使用し、"font-size:200%"; 重要なものを使用してください：オプションのためだけに

また

最も簡単な方法: option{zoom: 1.5} 完了!

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

2 つのオプションの間のスペースを増やすことはできません

しかし、トリッキーな方法があります

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

Answer 4

select オプションの代わりに ul をいつでも使用できます

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