下拉选择

使用改变元素初始外观的自定义 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>