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
你还需要在图标上添加一个修饰符
icon is-left，因为使用了has-icons-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>