← Back to gallery
CSS

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

Interaction / radio-input / hover preview

Rating star fill hover preview

Reimplements a star rating where pointer hover fills a preview range but the checked radio state remains the source of truth, keeping keyboard users, screen readers, and touch devices functional.

classic five — selected 4/5

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.

  • 5 star
  • radio
  • hover sweep

Selected 7 / 10

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.

  • 10 star
  • critic
  • tight spacing

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.

  • 3 tier
  • survey
  • deliberate

Rating inspector

Classic Five

Hover to preview, click to lock a rating.

Stars
5
Transition
0.12s

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

css
.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; }
}