A pure CSS star rating widget uses only HTML and CSS — no JavaScript — to create an interactive star rating component. It leverages radio buttons and CSS sibling selectors (~) combined with the direction: rtl trick to highlight stars on hover and persist a selected rating. This makes it lightweight, fast, and framework-agnostic. The technique works by hiding radio inputs behind star-shaped labels, and using the :checked pseudo-class along with sibling combinators to style the stars accordingly.

The trick relies on three CSS techniques: (1) Hidden <input type="radio"> elements store the rating value. (2) <label> elements styled with Font Awesome star icons act as the visible stars. (3) The container uses direction: rtl (right-to-left) combined with flex-direction: row-reverse, which reverses the DOM order visually. This allows the CSS sibling combinator ~ to select all stars that appear before the hovered or checked star, lighting them up from left to right — exactly as users expect. No JavaScript is needed for the core rating interaction.

Half-star support requires splitting each star position into two clickable zones: a left half (for .5 values) and a right half (for whole values). Each half uses a separate radio input and label. The left-half label uses width: 50%; overflow: hidden; to clip the star icon, showing only its left portion. The right-half label similarly shows only the right portion. When the full-star radio is checked, CSS highlights both halves. When only the half-star radio is checked, only the left half lights up. This approach maintains the zero-JavaScript philosophy while supporting precise ratings like 3.5 or 4.5.

Simply wrap the star rating HTML inside your <form> element. All radio inputs share the same name attribute (e.g., name="rating"), so when the form is submitted, the selected radio's value is sent as form data. In PHP, access it via $_POST['rating']; in Express.js, via req.body.rating. The component works seamlessly with any backend because it uses standard HTML form elements. You can also set a required attribute on one of the radios to make rating mandatory.

Yes — because the widget is built on native <input type="radio"> elements, it inherits full keyboard accessibility. Users can Tab into the radio group and use ← → arrow keys to change ratings. Screen readers announce each radio with its label. To enhance accessibility further, add aria-label attributes to each radio (e.g., aria-label="3 stars") and consider adding a visually hidden text label for the group. The generated code from this tool includes these accessibility best practices.

Absolutely. This tool uses Font Awesome 6's fa-star icon (Unicode f005) by default. You can swap it for any icon by changing the content property in the CSS ::before pseudo-element. For a heart rating, use content: '\f004'; (fa-heart). For circles, use content: '\f111';. You can also use emoji, custom SVG backgrounds, or any icon font. Just update the font-family and content values in the generated CSS to match your preferred icon set.

The pure CSS star rating technique works in all modern browsers including Chrome 88+, Firefox 96+, Safari 15+, and Edge 88+. It relies on well-supported CSS features: sibling selectors (~), :checked pseudo-class, direction property, and Flexbox. For Internet Explorer 11 (if still needed), the basic rating works but flex-direction: row-reverse may require a fallback using float: right. The generated code includes comments noting browser compatibility for transparency.

Yes! CSS transitions and transforms work perfectly with this technique. Common animations include: scale bounce on hover (transform: scale(1.15); transition: transform 0.15s ease;), color fade (transition: color 0.2s ease;), and pulse effects using @keyframes. This generator includes a toggle to enable/disable hover animations. For page-load animations, you can add a CSS keyframe that sequentially reveals stars using animation-delay on each label — creating a delightful "stars appearing" entrance effect.