更改下拉列表的选项高度 - CSS，Javascript

Question

是否可以使用css？，

更改两个选项之间的高度

参见说明性的前述。现金与货币之间的高度信用卡选项

请关注图片。

注意：仅支持 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

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

import java.util.Scanner;

public class MinMax
{
  public static void main(String[] args)
  {
   int i = 1;

   while (i <= 5)
   {
    int smallest = 0;
    int largest = 0;

    System.out.println("Enter number: ");
    Scanner input = new Scanner(System.in);
    int number = input.nextInt();

    System.out.println("Amount of numbers entered: " + i);

    System.out.println("Number entered: " + number);

    if (number < min)
    {
      min = number;
    }
    System.out.println("Smallest # so far: " + min);

    if (number > max)
    {
      max = number;
    }
    System.out.println("Largest # so far: " + max);


    i++;

   }
 }
}

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>

无法增加两个选项之间的空间

but there is a tricky way

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

Answer 4

使用特殊字体（非常小）并使用"font-size:200%"; 重要：只是为了选择

或

最简单的方法：选项{缩放：1.5} 完成！

Answer 5

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

Answer 6

您始终可以使用ul代替选择选项

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