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

ラベル上付き入力欄セット

ラベルを入力欄の上に配置し補足テキストを添えた形です。項目数の多い資料請求フォームなどで視認性を高めます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-06-04-wrap">
          <label class="d04-06-04-label">会社名</label>
          <input class="d04-06-04-input" type="text" placeholder="株式会社サンプル" readonly>
          <p class="d04-06-04-hint">法人名を正式名称でご入力ください</p>
        </div>

CSS

.d04-06-04-wrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:6px;font-family:sans-serif}
        .d04-06-04-label{font-size:13px;color:#111827;font-weight:700}
        .d04-06-04-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid #d1d5db;border-radius:6px;font-size:14px;color:#1f2937;background:#fff}
        .d04-06-04-hint{margin:2px 0 0;font-size:11px;color:#9ca3af}

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