echo-select
セレクトボックスを表示する。select要素ではなく、包括している要素にクラスを付与する。
左に 0.75em
、右に 2.5em
の余白が確保される。また、右端には展開できることを示す、CSSでスタイルを定義したシェブロンが表示される。
レイアウトは component > .echo-form, layout > .echo-forms
を使用することが望ましい。
.is-error
を付与するとエラー表示となり、色が $important
に変わる。
(breakpoint) | .echo-***-sm | .echo-*** | .echo-***-lg | |||
---|---|---|---|---|---|---|
(fontsize) | select要素の 最低高さ | (fontsize) | select要素の 最低高さ | (fontsize) | select要素の 最低高さ | |
md以下 | xs | 2.25rem (36px) |
sm | 2.5rem (40px) |
md | 2.75rem (44px) |
lg以上 | sm | 2.5rem (40px) |
md | 2.75rem (44px) |
lg | 3.125rem (50px) |
min-heightプロパティは、直下のselect要素に指定しなければならない(包括要素に指定した場合、select要素の高さが追随しない)。
<div class="echo-select">
<select>
<option>年を選択...</option>
<option value="2021年">2021年</option>
<option value="2020年">2020年</option>
<option value="2019年">2019年</option>
<option value="2018年">2018年</option>
</select>
</div>
<div class="echo-select is-error">
<select>
<option>年を選択...</option>
<option value="2021年">2021年</option>
<option value="2020年">2020年</option>
<option value="2019年">2019年</option>
<option value="2018年">2018年</option>
</select>
</div>
sub class echo-select-(size)
セレクトボックスの文字サイズ、最低高さを変更する。
(size)は、 sm, lg
に対応している。
このサンプルコードでは比較のため、同サイズのボタンを表示している。
echo-select-sm
(default)
echo-select-lg
<p class="echo-title echo-title-style-a echo-title-level-5 echo-margin-bottom-md">echo-select-sm</p>
<div class="echo-select echo-select-sm">
<select>
<option>年を選択...</option>
<option value="2021年">2021年</option>
<option value="2020年">2020年</option>
<option value="2019年">2019年</option>
<option value="2018年">2018年</option>
</select>
</div>
<input type="button" class="echo-button echo-button-sm echo-button-style-a" value="ボタン" />
<p class="echo-title echo-title-style-a echo-title-level-5 echo-margin-bottom-md echo-margin-top-lg">(default)</p>
<div class="echo-select">
<select>
<option>年を選択...</option>
<option value="2021年">2021年</option>
<option value="2020年">2020年</option>
<option value="2019年">2019年</option>
<option value="2018年">2018年</option>
</select>
</div>
<input type="button" class="echo-button echo-button-style-a" value="ボタン" />
<p class="echo-title echo-title-style-a echo-title-level-5 echo-margin-bottom-md echo-margin-top-lg">echo-select-lg</p>
<div class="echo-select echo-select-lg">
<select>
<option>年を選択...</option>
<option value="2021年">2021年</option>
<option value="2020年">2020年</option>
<option value="2019年">2019年</option>
<option value="2018年">2018年</option>
</select>
</div>
<input type="button" class="echo-button echo-button-lg echo-button-style-a" value="ボタン" />
sub class echo-select-fixed
.echo-select-(size)
と同時に付与すると、セレクトボックスが (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。
このサンプルコードでは比較のため、同サイズのボタンを表示している。
echo-select-sm
(default)
echo-select-lg
<p class="echo-title echo-title-style-a echo-title-level-5 echo-margin-bottom-md">echo-select-sm</p>
<div class="echo-select echo-select-fixed echo-select-sm">
<select>
<option>月を選択...</option>
<option value="">2017年</option>
<option value="">2016年</option>
<option value="">2015年</option>
</select>
</div>
<input type="button" class="echo-button echo-button-fixed echo-button-sm echo-button-style-a" value="ボタン" />
<p class="echo-title echo-title-style-a echo-title-level-5 echo-margin-bottom-md echo-margin-top-lg">(default)</p>
<div class="echo-select echo-select-fixed">
<select>
<option>月を選択...</option>
<option value="">2017年</option>
<option value="">2016年</option>
<option value="">2015年</option>
</select>
</div>
<input type="button" class="echo-button echo-button-fixed echo-button-style-a" value="ボタン" />
<p class="echo-title echo-title-style-a echo-title-level-5 echo-margin-bottom-md echo-margin-top-lg">echo-select-lg</p>
<div class="echo-select echo-select-fixed echo-select-lg">
<select>
<option>月を選択...</option>
<option value="">2017年</option>
<option value="">2016年</option>
<option value="">2015年</option>
</select>
</div>
<input type="button" class="echo-button echo-button-fixed echo-button-lg echo-button-style-a" value="ボタン" />