セレクトボックス

サイズ

※幅、高さは初期デザイン時のみ変更可能です。種類については、無作為に増やすことを禁止します。

幅:

最小	小	通常	大	最大	100%	成り行き
.xs	.sm	-	.lg	.xl	.w100	.auto
width: 100% max-width: 56px	width: 100% max-width: 100px	width: 100% max-width: 250px	width: 100% max-width: 350px	width: 100% max-width: 500px	width: 100% max-width: 100%	width: auto padding: 0 $margin-sm

高さ:

N px（40px）

状態

以下はサンプルです。用途を定めてデザインしてください。

通常:

-- 選択肢1 選択肢2 選択肢3 選択肢4

<select>
<option value="">--</option>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4">選択肢4</option>
</select>

選択:

-- 選択肢1 選択肢2 選択肢3 選択肢4

<select>
<option value="">--</option>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4">選択肢4</option>
</select>

エラー:

-- 選択肢1 選択肢2 選択肢3 選択肢4

<select class="is-error">
<option value="">--</option>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4">選択肢4</option>
</select>

非アクティブ:

-- 選択肢1 選択肢2 選択肢3 選択肢4

<select class="is-disabled">
<option value="">--</option>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4">選択肢4</option>
</select>

疑似（改行用）:

改行したいテキストを選択する場合

<div class="longSelect xl">
<button type="button" class="selectBtn" aria-expanded="false" aria-haspopup="listbox">改行したいテキストを選択する場合</button>
<ul hidden role="listbox">
<li><button type="button" role="option">文章</button></li>
</ul>
</div>