セレクトボックス Select Box
ドロップダウンから一つの選択肢を選ぶフォーム要素。
ライブデモ
▼
ソースコード
<div class="demo-select-wrapper">
<label class="demo-select-label" for="demo-select">都道府県</label>
<div class="demo-select-container">
<select class="demo-select-input" id="demo-select">
<option value="" disabled selected>選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="kyoto">京都府</option>
<option value="fukuoka">福岡県</option>
</select>
<span class="demo-select-arrow">▼</span>
</div>
</div>.demo-select-wrapper { max-width: 280px; }
.demo-select-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.demo-select-container { position: relative; }
.demo-select-input {
width: 100%; padding: 10px 36px 10px 12px; border: 2px solid #d1d5db;
border-radius: 8px; font-size: 14px; background: #fff;
appearance: none; outline: none; cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.demo-select-input:focus {
border-color: var(--ui-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-select-arrow {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
font-size: 10px; color: var(--ui-primary); pointer-events: none;
}(function(){
document.querySelectorAll('.demo-select-trigger').forEach(function(trigger){
var wrap = trigger.closest('.demo-select-wrap');
if(!wrap) return;
var list = wrap.querySelector('.demo-select-list');
var display = wrap.querySelector('.demo-select-display');
if(!list) return;
trigger.addEventListener('click', function(e){
e.stopPropagation();
list.style.display = list.style.display === 'block' ? 'none' : 'block';
});
wrap.querySelectorAll('.demo-select-option').forEach(function(opt){
opt.addEventListener('click', function(){
if(display) display.textContent = opt.textContent;
list.style.display = 'none';
wrap.querySelectorAll('.demo-select-option').forEach(function(o){ o.classList.remove('selected'); });
opt.classList.add('selected');
});
});
document.addEventListener('click', function(e){
if(!wrap.contains(e.target)) list.style.display = 'none';
});
});
})();AIプロンプト
Basic
セレクトボックスをHTML/CSSで作ってください。ドロップダウンリストから選択肢を選べるフォーム要素です。
Custom
以下の仕様でカスタムセレクトボックスを実装してください。 - ネイティブのselectではなくdivベースのカスタムドロップダウン - プライマリカラー: #2563eb - 選択肢にアイコン表示 - 検索フィルター機能 - 選択時のアニメーション - ドロップダウンの開閉アニメーション
Advanced
アクセシビリティ完全対応のカスタムセレクトボックスを実装してください。 - role="listbox", role="option" の適切な使用 - aria-activedescendant でフォーカス管理 - 矢印キーで選択肢を移動、Enter/Spaceで決定 - 文字入力で先頭一致の選択肢にジャンプ - ESCでドロップダウンを閉じる - 仮想スクロール（大量の選択肢でもパフォーマンス良好） - グループ化対応（optgroup相当） - 複数選択モード対応