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

星+コメント欄の複合評価フォーム

星評価とコメント入力欄、送信ボタンをまとめたカード型フォーム見本。商品レビュー投稿フォームのデザインに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-09-card">
          <div class="d04-13-09-stars">
            <span class="d04-13-09-star on">&#9733;</span>
            <span class="d04-13-09-star on">&#9733;</span>
            <span class="d04-13-09-star on">&#9733;</span>
            <span class="d04-13-09-star on">&#9733;</span>
            <span class="d04-13-09-star">&#9733;</span>
          </div>
          <div class="d04-13-09-textarea">
            <span class="d04-13-09-placeholder">レビューを入力してください…</span>
          </div>
          <span class="d04-13-09-btn">送信する</span>
        </div>

CSS

.d04-13-09-card{width:250px;border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:12px}
        .d04-13-09-stars{display:flex;gap:4px}
        .d04-13-09-star{font-size:22px;color:#e2e8f0}
        .d04-13-09-star.on{color:#fbbf24}
        .d04-13-09-textarea{border:1px solid #e2e8f0;border-radius:8px;height:52px;padding:8px 10px;background:#f8fafc}
        .d04-13-09-placeholder{font-size:12px;color:#cbd5e1}
        .d04-13-09-btn{align-self:flex-end;background:#4f46e5;color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:8px}

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