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

下線のみ型入力欄(ミニマル)

下線だけで構成したミニマルな入力欄です。装飾を抑えたいシンプルな予約フォームやアンケートに適しています。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-06-03-wrap">
          <label class="d04-06-03-label">電話番号</label>
          <input class="d04-06-03-input" type="text" placeholder="090-1234-5678" readonly>
        </div>

CSS

.d04-06-03-wrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px;font-family:sans-serif}
        .d04-06-03-label{font-size:13px;color:#6b7280;font-weight:600}
        .d04-06-03-input{width:100%;box-sizing:border-box;padding:8px 2px;border:none;border-bottom:2px solid #94a3b8;border-radius:0;font-size:14px;color:#1f2937;background:transparent}

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