selectクラスは、<select>HTML要素をシンプルにラップしたもので、スタイル設定の柔軟性とアイコンのサポートが向上します。
スポンサー
選択
ブラウザに組み込まれたセレクトドロップダウンで、それに応じてスタイルが設定されています。
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>複数選択 #
is-multiple修飾子とmultipleHTML属性を使用することで、複数選択ドロップダウンのスタイルを設定できます。
<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
セレクトのサイズは、アイコンコンテナのサイズを決定します。
<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>