module-select

echo-select

セレクトボックスを表示する。select要素ではなく、包括している要素にクラスを付与する。
左に 0.75em 、右に 2.5em の余白が確保される。また、右端には展開できることを示す、CSSでスタイルを定義したシェブロンが表示される。

レイアウトは component > .echo-form, layout > .echo-forms を使用することが望ましい。

.is-error を付与するとエラー表示となり、色が $important に変わる。

スタイルの変化 group: form
(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="ボタン" />