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