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

エラー状態表示入力欄(静止)

赤い枠線とエラーメッセージを表示した状態のデザインです。入力チェック機能付きの問い合わせフォームの見本になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-06-06-wrap">
          <label class="d04-06-06-label">メールアドレス</label>
          <input class="d04-06-06-input" type="text" value="taro@invalid" readonly>
          <p class="d04-06-06-msg">&#9888; 正しいメールアドレスを入力してください</p>
        </div>

CSS

.d04-06-06-wrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:6px;font-family:sans-serif}
        .d04-06-06-label{font-size:13px;color:#374151;font-weight:600}
        .d04-06-06-input{width:100%;box-sizing:border-box;padding:10px 14px;border:1.5px solid #ef4444;border-radius:6px;font-size:14px;color:#991b1b;background:#fef2f2}
        .d04-06-06-msg{margin:0;font-size:11.5px;color:#dc2626;font-weight:600}

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