module-select

m-select

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

<div style="margin-bottom: 1rem;">
    <div class="m-select">
        <select>
            <option>月を選択...</option>
            <option value="">2017年</option>
            <option value="">2016年</option>
            <option value="">2015年</option>
        </select>
    </div>
</div>

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

m-select-(size)

セレクトボックスの全体のサイズを変更する。(size)は sm, lg に対応している。

<div style="margin-bottom: 1rem;">
    <div class="m-select m-select-sm">
        <select>
            <option>月を選択...</option>
            <option value="">2017年</option>
            <option value="">2016年</option>
            <option value="">2015年</option>
        </select>
    </div>
</div>
<div>
    <div class="m-select m-select-lg">
        <select>
            <option>月を選択...</option>
            <option value="">2017年</option>
            <option value="">2016年</option>
            <option value="">2015年</option>
        </select>
    </div>
</div>