下拉列表

使用可更改元素初始外观的CSS自定义 <select>。

本页导航↓

默认

自定义 <select> 菜单只需要一个自定义类，.form-select 就可以触发自定义样式。自定义样式仅限于 <select> 的初始外观，并且由于浏览器的限制，无法修改 <option> 。

<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

尺寸

您也可以从小的和大的自定义选择，以匹配我们相似大小的文本输入。

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

还支持 multiple 属性:

<select class="form-select" multiple aria-label="multiple select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

As is the size attribute:

和 size 属性一样:

<select class="form-select" size="3" aria-label="size 3 select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

禁用

在select上添加 disabled 布尔属性，使其呈现灰色外观，并删除指针事件。

<select class="form-select" aria-label="Disabled select example" disabled>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>