15

是否可以使用 CSS 更改两个选项之间的高度？

请参阅说明性示例。现金和信用卡选项之间的高度

在此处输入图像描述

注意：我只支持Chrome

4

6 回答 6

16

没人记得<optgroup>s了吗？很少使用，但每个浏览器都支持。

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

于 2015-03-25T13:34:32.530 回答
6

另一种选择是您可以将字体大小更改为更大。

.myOption {
    font-size: 20px;
}
于 2016-02-14T23:27:56.617 回答
5

使用特殊字体（非常小）并使用"font-size:200%"; 重要：仅用于选项

或者

最简单的方法：option{zoom: 1.5} 完成！

在此处输入图像描述

于 2019-09-18T04:48:29.113 回答
4

尝试这个

   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>
于 2012-11-05T11:43:30.790 回答
1

不具体。您无法控制选项列表的样式。但是，您可以使用 select2 ( https://select2.github.io/examples.html ) 之类的东西来创建您可以设置样式的外观选择。

于 2016-02-14T23:38:36.820 回答
-6

您始终可以使用 ul 而不是 select 选项

<ul class="dis">
  <li>1erwer</li>
  <li>2erwer</li>
  <li>3erwer</li>
  <li>4erwer</li>
  <li>5erwer</li>
</ul>
于 2019-03-19T22:34:03.563 回答