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

必須マーク付き入力欄セット

ラベルに「必須」バッジを添えた入力欄です。回答が必要な項目を明確に示したいエントリーフォームに向いています。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-06-08-wrap">
          <label class="d04-06-08-label">お名前<span class="d04-06-08-req">必須</span></label>
          <input class="d04-06-08-input" type="text" placeholder="山田 太郎" readonly>
        </div>

CSS

.d04-06-08-wrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px;font-family:sans-serif}
        .d04-06-08-label{display:flex;align-items:center;gap:6px;font-size:13px;color:#374151;font-weight:600}
        .d04-06-08-req{font-size:10px;color:#fff;background:#ef4444;border-radius:3px;padding:2px 6px;font-weight:700}
        .d04-06-08-input{width:100%;box-sizing:border-box;padding:10px 14px;border:1.5px solid #cbd5e1;border-radius:6px;font-size:14px;color:#1f2937;background:#fff}

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