下拉列表
使用可更改元素初始外观的CSS自定义 select。更新于: 2023-04-30 14:28:21 查看: 446
发布于: 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.,真实性请妥善甄别。