パーツ番号 04-06-10 ・ CSSのみ

セレクトボックス静止デザイン

ドロップダウン矢印付きのセレクト欄の見た目です。配送先の都道府県選択など、選択式フォーム項目の見本になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-06-10-wrap">
          <label class="d04-06-10-label">都道府県</label>
          <div class="d04-06-10-select">
            <span class="d04-06-10-value">東京都</span>
            <span class="d04-06-10-arrow">&#9662;</span>
          </div>
        </div>

CSS

.d04-06-10-wrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px;font-family:sans-serif}
        .d04-06-10-label{font-size:13px;color:#374151;font-weight:600}
        .d04-06-10-select{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1.5px solid #cbd5e1;border-radius:6px;background:#fff}
        .d04-06-10-value{font-size:14px;color:#1f2937}
        .d04-06-10-arrow{font-size:11px;color:#6b7280}

クラス名 .d04-06-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。