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

フローティングラベル型入力欄

枠線に重なるようラベルを浮かせて配置した入力欄です。入力済みの状態を保ったまま項目名を常時表示したいフォームに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-06-11-wrap">
          <div class="d04-06-11-field">
            <input class="d04-06-11-input" type="text" value="山田 太郎" readonly>
            <span class="d04-06-11-label">お名前</span>
          </div>
        </div>

CSS

.d04-06-11-wrap{width:100%;max-width:280px;font-family:sans-serif}
        .d04-06-11-field{position:relative;width:100%}
        .d04-06-11-input{width:100%;box-sizing:border-box;padding:18px 14px 8px;border:1.5px solid #cbd5e1;border-radius:6px;font-size:14px;color:#1f2937;background:#fff}
        .d04-06-11-label{position:absolute;left:12px;top:-8px;background:#fff;padding:0 4px;font-size:10.5px;color:#2563eb;font-weight:600}

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