module-select

select

セレクトボックスをインライン表示する。select要素ではなく、包括している要素にクラスを付与する。
余白・レイアウト等は utility > .p や component > .form で指定する。
is-error を同時に使用するとエラーがあったときの表示となる。 リスト先頭のシェブロンは /_scss/mixin/mixin.css の chevron()を参照。

<div class="select m-b">
<select>
<option>月を選択...</option>
<option value="">2017年</option>
<option value="">2016年</option>
<option value="">2015年</option>
</select>
</div>

<div class="select is-error">
<select>
<option>月を選択...</option>
<option value="">2017年</option>
<option value="">2016年</option>
<option value="">2015年</option>
</select>
</div>

select-(size)

テキスト入力を即す欄の全体のサイズを変更する。(size)は sm, lg に対応している。

<div class="m-b">
    <div class="select select-sm m-b">
    <select>
    <option>月を選択...</option>
    <option value="">2017年</option>
    <option value="">2016年</option>
    <option value="">2015年</option>
    </select>
    </div>
</div>
<div class="m-b">
    <div class="select select-lg m-b">
    <select>
    <option>月を選択...</option>
    <option value="">2017年</option>
    <option value="">2016年</option>
    <option value="">2015年</option>
    </select>
    </div>
</div>