Rating Star Fill Hover Preview

A radio-input star rating that fills a preview range on pointer hover while keeping checked state as the source of truth, with focus-visible and reduced-motion fallbacks.

Duration: 1s
Resolution: 1440×900
Format: CSS

ratingstar-fillhover-previewradio-inputreduced-motion

classic five — selected 4/5

Canonical product rating

Classic Five

Five radio inputs render as stars with a hover preview fill that sweeps in on pointer-over and a checked state that persists the user choice.

Fine-grain reviewer scale

Ten-Tier

Ten stars give critics and reviewers half-increments visually. The transition is faster so sweeping across many targets still feels responsive.

Selected 2 / 3

Emoji-style quick rating

Three-Tier

Three stars serve as poor / okay / great. The slower transition reads more deliberate so the user feels the selection click into place.

Stars: 5
Transition: 0.12s

Fill transition0.12s

Works for review UIs and product ratings. Keyboard users can still pick via focus + Space because the underlying radios stay real inputs.

.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
}

.star-rating input { display: none; }

.star-rating label {
  cursor: pointer;
  color: rgba(148, 163, 184, 0.28);
  transition: color 0.12s ease;
}

/* Hover preview: sibling combinator fills pointed-at star + everything after */
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #fde047;
}

/* Checked state: persists the selection */
.star-rating input:checked ~ label {
  color: #fde047;
}

/* Hover override wins over checked while pointer is within the row */
.star-rating:hover input:checked ~ label {
  color: rgba(148, 163, 184, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .star-rating label { transition: none; }
}

Rating Star Fill Hover Preview