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

成功状態表示入力欄(静止)

緑色の枠線とチェックマークで入力内容が有効であることを示す状態です。会員登録フォームの検証結果表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-06-07-wrap">
          <label class="d04-06-07-label">ユーザー名</label>
          <div class="d04-06-07-field">
            <input class="d04-06-07-input" type="text" value="taro_yamada" readonly>
            <span class="d04-06-07-check">&#10003;</span>
          </div>
          <p class="d04-06-07-msg">このユーザー名は使用できます</p>
        </div>

CSS

.d04-06-07-wrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:6px;font-family:sans-serif}
        .d04-06-07-label{font-size:13px;color:#374151;font-weight:600}
        .d04-06-07-field{position:relative;display:flex;align-items:center}
        .d04-06-07-input{width:100%;box-sizing:border-box;padding:10px 34px 10px 14px;border:1.5px solid #22c55e;border-radius:6px;font-size:14px;color:#14532d;background:#f0fdf4}
        .d04-06-07-check{position:absolute;right:12px;color:#16a34a;font-weight:700;font-size:14px}
        .d04-06-07-msg{margin:0;font-size:11.5px;color:#16a34a;font-weight:600}

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