パーツ番号 11-15-06 ・ CSSのみ

メニュー内のテーマ切替行(現在の状態表示)

設定メニューの1行として、現在選択中のモード名を右端に表示した見本です。アプリ風の設定一覧ページにそのまま組み込めます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-15-06-row">
          <span class="d11-15-06-icon">
            <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36A7 7 0 1113.36 3.1 9.13 9.13 0 0012 3z" fill="#475569"/></svg>
          </span>
          <span class="d11-15-06-label">外観モード</span>
          <span class="d11-15-06-value">ダーク</span>
          <span class="d11-15-06-arrow">&#8250;</span>
        </div>

CSS

.d11-15-06-row{display:flex;align-items:center;gap:9px;width:230px;padding:12px 14px;border-radius:10px;background:#f8fafc;border:1px solid #eef0f3;box-sizing:border-box}
        .d11-15-06-label{font-size:13px;color:#374151;font-weight:600;flex:1}
        .d11-15-06-value{font-size:12.5px;color:#6366f1;font-weight:700}
        .d11-15-06-arrow{font-size:16px;color:#9ca3af}

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