使用改变元素初始外观的自定义 CSS 自定义原生 <select>。

默认

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

<select class="form-select" aria-label="默认下拉选择示例">
  <option selected>打开这个选择菜单</option>
  <option value="1">第一回 北汉主屏逐忠臣　呼延赞激烈报仇</option>
  <option value="2">第二回 李建忠力救义士　呼延赞梦神教武</option>
  <option value="3">第三回 金头娘征场斗艺　高怀德大战潞州</option>
</select>

尺寸

您还可以从小型和大型自定义选择中进行选择，以匹配我们类似大小的文本输入。

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg 示例">
  <option selected>打开这个选择菜单</option>
  <option value="1">第一回 北汉主屏逐忠臣　呼延赞激烈报仇</option>
  <option value="2">第二回 李建忠力救义士　呼延赞梦神教武</option>
  <option value="3">第三回 金头娘征场斗艺　高怀德大战潞州</option>
</select>

<select class="form-select form-select-sm" aria-label=".form-select-sm 示例">
  <option selected>打开这个选择菜单</option>
  <option value="1">第一回 北汉主屏逐忠臣　呼延赞激烈报仇</option>
  <option value="2">第二回 李建忠力救义士　呼延赞梦神教武</option>
  <option value="3">第三回 金头娘征场斗艺　高怀德大战潞州</option>
</select>

还支持 multiple 属性：

<select class="form-select" multiple aria-label="multiple下拉选择示例">
  <option selected>打开这个选择菜单</option>
  <option value="1">第一回 北汉主屏逐忠臣　呼延赞激烈报仇</option>
  <option value="2">第二回 李建忠力救义士　呼延赞梦神教武</option>
  <option value="3">第三回 金头娘征场斗艺　高怀德大战潞州</option>
</select>

与 size 属性一样：

<select class="form-select" size="3" aria-label="3个下拉选择项可见示例">
  <option selected>打开这个选择菜单</option>
  <option value="1">第一回 北汉主屏逐忠臣　呼延赞激烈报仇</option>
  <option value="2">第二回 李建忠力救义士　呼延赞梦神教武</option>
  <option value="3">第三回 金头娘征场斗艺　高怀德大战潞州</option>
</select>

禁用

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

<select class="form-select" aria-label="禁用下拉选择示例" disabled>
  <option selected>打开这个选择菜单</option>
  <option value="1">第一回 北汉主屏逐忠臣　呼延赞激烈报仇</option>
  <option value="2">第二回 李建忠力救义士　呼延赞梦神教武</option>
  <option value="3">第三回 金头娘征场斗艺　高怀德大战潞州</option>
</select>