下拉列表

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

更新于: 2023-04-30 14:28:21 查看: 489

发布于: 2021-8-31 18:42 发布者: 大米

默认 

自定义 <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>

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

扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请