Bootstrap5 选择（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:

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

在线运行

禁用（Disabled）

在选择上添加 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>

在线运行