在GitHub上查看

下拉列表

使用可更改元素初始外观的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>