← 静的パーツギャラリーへ戻る

パーツ番号 04-13-12 ・ CSSのみ

しずく(涙滴)アイコンの鮮度評価入力

星の代わりに水滴型アイコンを使った評価入力の静止見本です。青果や鮮魚、スキンケア商品など「鮮度」「うるおい」を訴求するショップのレビュー欄に合います。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-12-field">
          <span class="d04-13-12-label">鮮度・満足度</span>
          <div class="d04-13-12-drops">
            <svg class="d04-13-12-drop on" viewBox="0 0 24 24"><path d="M12 2C12 2 5 11 5 15.5A7 7 0 0019 15.5C19 11 12 2 12 2z" fill="currentColor"/></svg>
            <svg class="d04-13-12-drop on" viewBox="0 0 24 24"><path d="M12 2C12 2 5 11 5 15.5A7 7 0 0019 15.5C19 11 12 2 12 2z" fill="currentColor"/></svg>
            <svg class="d04-13-12-drop on" viewBox="0 0 24 24"><path d="M12 2C12 2 5 11 5 15.5A7 7 0 0019 15.5C19 11 12 2 12 2z" fill="currentColor"/></svg>
            <svg class="d04-13-12-drop" viewBox="0 0 24 24"><path d="M12 2C12 2 5 11 5 15.5A7 7 0 0019 15.5C19 11 12 2 12 2z" fill="currentColor"/></svg>
            <svg class="d04-13-12-drop" viewBox="0 0 24 24"><path d="M12 2C12 2 5 11 5 15.5A7 7 0 0019 15.5C19 11 12 2 12 2z" fill="currentColor"/></svg>
          </div>
        </div>

CSS

.d04-13-12-field{display:flex;flex-direction:column;align-items:center;gap:12px}
        .d04-13-12-label{font-size:12px;color:#94a3b8}
        .d04-13-12-drops{display:flex;gap:6px}
        .d04-13-12-drop{width:28px;height:28px;color:#e2e8f0}
        .d04-13-12-drop.on{color:#0ea5e9}

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