select 类是对 <select> HTML 元素的简单封装，它可以为样式设置提供更大的灵活性，并支持图标。
赞助
选择框
浏览器内置的 选择下拉框，并进行了相应的样式设置
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>多选框 #
您可以使用 is-multiple 修饰符以及 multiple HTML 属性来设置 多选框 下拉菜单的样式。
<div class="select is-multiple">
<select multiple size="8">
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia</option>
<option value="Brazil">Brazil</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Ecuador">Ecuador</option>
<option value="Guyana">Guyana</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Suriname">Suriname</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
</select>
</div>颜色 #
示例
HTML
<div class="select is-link">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>示例
HTML
<div class="select is-primary">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>示例
HTML
<div class="select is-info">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>示例
HTML
<div class="select is-success">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>示例
HTML
<div class="select is-warning">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>示例
HTML
<div class="select is-danger">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>样式 #
您可以通过附加 is-rounded 修饰符来创建一个 圆角下拉框
<div class="select is-rounded">
<select>
<option>Rounded dropdown</option>
<option>With options</option>
</select>
</div>尺寸 #
select 元素有 4 种不同的尺寸
示例
HTML
<div class="select is-small">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>示例
HTML
<div class="select is-normal">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>示例
HTML
<div class="select is-medium">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>示例
HTML
<div class="select is-large">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>状态 #
Bulma 设置了 select 元素的不同 状态 的样式。每种状态都可以作为伪类和 CSS 类使用
:hover和is-hovered:focus和is-focused:active和is-active
这允许您在不触发特定状态的情况下获得该状态的样式。
正常
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>悬停
<div class="select">
<select class="is-hovered">
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>聚焦
<div class="select">
<select class="is-focused">
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>加载中
<div class="select is-loading">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>带有图标 #
您可以在控件上附加 修饰符
-
has-icons-left
您还需要在 图标 上添加修饰符
- 由于使用了
has-icons-left，因此为icon is-left
select 的大小将定义图标容器的大小。
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-globe"></i>
</div>
</div>如果控件包含图标，无论输入 或 图标的大小如何，Bulma 都会确保图标保持 居中。
<div class="control has-icons-left">
<div class="select is-small">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<span class="icon is-small is-left">
<i class="fas fa-globe"></i>
</span>
</div><div class="control has-icons-left">
<div class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<span class="icon is-left">
<i class="fas fa-globe"></i>
</span>
</div><div class="control has-icons-left">
<div class="select is-medium">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<span class="icon is-medium is-left">
<i class="fas fa-globe"></i>
</span>
</div><div class="control has-icons-left">
<div class="select is-large">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<span class="icon is-large is-left">
<i class="fas fa-globe"></i>
</span>
</div>
