Half-Star Rating Input — Free HTML CSS JS Precision Star Widget

<div class="hsr-card">
  <h3>Rate this product</h3>
  <p class="hsr-sub">Click anywhere on a star — the left half sets a half rating, the right half sets a full one.</p>
  <div class="hsr-stars" id="hsrStars" role="slider" tabindex="0" aria-label="Star rating" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0">
    <span class="hsr-star" data-index="0"><span class="hsr-fill"></span></span>
    <span class="hsr-star" data-index="1"><span class="hsr-fill"></span></span>
    <span class="hsr-star" data-index="2"><span class="hsr-fill"></span></span>
    <span class="hsr-star" data-index="3"><span class="hsr-fill"></span></span>
    <span class="hsr-star" data-index="4"><span class="hsr-fill"></span></span>
  </div>
  <p class="hsr-value" id="hsrValue">No rating yet</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.hsr-card{background:#fff;border-radius:16px;padding:28px 32px;width:100%;max-width:360px;text-align:center;box-shadow:0 4px 24px rgba(15,23,42,.08)}
.hsr-card h3{font-size:16px;font-weight:800;color:#0f172a;margin-bottom:6px}
.hsr-sub{font-size:12px;color:#64748b;line-height:1.5;margin-bottom:18px}
.hsr-stars{display:inline-flex;gap:6px;cursor:pointer;outline:none}
.hsr-stars:focus-visible .hsr-star{outline:2px solid #6366f1;outline-offset:3px;border-radius:4px}
.hsr-star{position:relative;width:38px;height:38px;color:#e2e8f0}
.hsr-star::before{content:'★';position:absolute;inset:0;font-size:38px;line-height:38px;color:#e2e8f0}
.hsr-fill{position:absolute;inset:0;width:0%;overflow:hidden;white-space:nowrap}
.hsr-fill::before{content:'★';font-size:38px;line-height:38px;color:#f59e0b}
.hsr-value{margin-top:14px;font-size:13px;font-weight:700;color:#334155}

(function(){
  var wrap = document.getElementById('hsrStars');
  var stars = Array.prototype.slice.call(wrap.querySelectorAll('.hsr-star'));
  var valueEl = document.getElementById('hsrValue');
  var current = 0; // committed rating, e.g. 3.5
  var hovering = false;

  function render(rating) {
    stars.forEach(function (star, i) {
      var fill = star.querySelector('.hsr-fill');
      var diff = rating - i; // how much of this star should be filled, 0..1
      var pct = Math.max(0, Math.min(1, diff)) * 100;
      fill.style.width = pct + '%';
    });
  }

  function ratingFromEvent(e) {
    var star = e.target.closest('.hsr-star');
    if (!star) return null;
    var index = Number(star.getAttribute('data-index'));
    var rect = star.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var half = x < rect.width / 2;
    return index + (half ? 0.5 : 1);
  }

  wrap.addEventListener('mousemove', function (e) {
    var r = ratingFromEvent(e);
    if (r === null) return;
    hovering = true;
    render(r);
  });

  wrap.addEventListener('mouseleave', function () {
    hovering = false;
    render(current);
  });

  wrap.addEventListener('click', function (e) {
    var r = ratingFromEvent(e);
    if (r === null) return;
    current = r;
    render(current);
    updateValue();
  });

  wrap.addEventListener('keydown', function (e) {
    var step = 0.5;
    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { current = Math.min(5, current + step); }
    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { current = Math.max(0, current - step); }
    else { return; }
    e.preventDefault();
    render(current);
    updateValue();
  });

  function updateValue() {
    wrap.setAttribute('aria-valuenow', String(current));
    valueEl.textContent = current === 0 ? 'No rating yet' : current.toFixed(1) + ' out of 5 stars';
  }
})();