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

アイコン付き入力欄(検索・メール等)

入力欄の左側にアイコンを配置したデザインです。サイト内検索窓やメールアドレス入力欄に用途を明示できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-06-05-wrap">
          <label class="d04-06-05-label">検索</label>
          <div class="d04-06-05-field">
            <span class="d04-06-05-icon">&#128269;</span>
            <input class="d04-06-05-input" type="text" placeholder="キーワードを入力" readonly>
          </div>
        </div>

CSS

.d04-06-05-wrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px;font-family:sans-serif}
        .d04-06-05-label{font-size:13px;color:#374151;font-weight:600}
        .d04-06-05-field{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid #cbd5e1;border-radius:20px;background:#fff}
        .d04-06-05-icon{font-size:13px;opacity:.55}
        .d04-06-05-input{flex:1;border:none;outline:none;font-size:14px;color:#1f2937;background:transparent}

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