Question

问题是我无法更改html.for（选择->选项）中下拉框的高度，我尝试在CSS中应用样式。它不起作用

Answer 1

您无法控制option的样式。（请参见此处：https://css-tricks.com/dropdown-default-styling/）

无论您如何更改font-size，option都会增加

select option{
  font-size: 20px;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 2

无法更改“ option”的高度

仅您可以更改“选项”值的背景颜色和颜色

您可以更改“选择”元素的高度。

Answer 3

您只需要为height标签使用select CSS属性。

label select {
  height: 100px;
}

<label>
    <select>
        <option selected>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</label>

Answer 4

<select style="min-height:40px;min-width:100px;">
     <option value="">Select1</option>
     <option value="">Select2</option>
     <option value="">Select3</option>
</select>

Answer 5

您可以使用以下CSS样式化 select 和 option 元素的样式：

select { height: 200px; color: red; }

option { color: green; }

请注意，您必须删除“。”在 select 和 option 之前。这将覆盖所有 select 和 option 元素。

编辑：

您还可以通过给某个元素一个类名来引用某个 select 元素，如下所示：

select.s1{ height: 100px; }

select.s2{ height: 150px; }

<select class="s1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<select class="s2">
    <option value="fiat">Fiat</option>
    <option value="ferrari">Ferrari</option>
    <option value="alfaromeo>Alfa Romeo</option>
    <option value="lancia">Lancia</option>
</select>

如何在HTML中更改高度以下拉框？

5 个答案: