Star Ratings 2

Star Ratings selector

by kthornbloom

HTML

<div class="star-rating">

		<div class="star-rating--display">
	
			
				<input type="radio" id="half" name="star-ratings" required>
				<label for="half" class="star-rating--star">
					<div class="star-rating--caption">
						1
					</div>
				</label>
				
				<input type="radio" id="one" name="star-ratings" required>
				<label for="one" class="star-rating--star">
					<div class="star-rating--caption">
						1.5
					</div>
				</label>
				
				<input type="radio" id="onehalf" name="star-ratings" required>
				<label for="onehalf" class="star-rating--star">
					<div class="star-rating--caption">
						2
					</div>
				</label>
				
				<input type="radio" id="two" name="star-ratings" required>
				<label for="two" class="star-rating--star">
					<div class="star-rating--caption">
						2.5
					</div>
				</label>
				
				<input type="radio" id="twohalf" name="star-ratings" required>
				<label for="twohalf" class="star-rating--star">
					<div class="star-rating--caption">
						3
					</div>
				</label>
				
				<input type="radio" id="three" name="star-ratings" required>
				<label for="three" class="star-rating--star">
					<div class="star-rating--caption">
						3.5
					</div>
				</label>
				
				<input type="radio" id="threehalf" name="star-ratings" required>
				<label for="threehalf" class="star-rating--star">
					<div class="star-rating--caption">
						4
					</div>
				</label>
				
				<input type="radio" id="four" name="star-ratings" required>
				<label for="four" class="star-rating--star">
					<div class="star-rating--caption">
						4.5
					</div>
				</label>
				
				<input type="radio" id="fourhalf" name="star-ratings" required>
				<label for="fourhalf" class="star-rating--star">
					<div class="star-rating--caption">
						5
					</div>
				</label>
	
		</div>
	
	</div>

SCSS

// SVG Star Variables
$star-unfilled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23a1a1a1' d='M18 2.1l3.5 10.8c.2.6.8 1 1.4 1l10.8.3-8.6 7.2c-.5.4-.7 1-.5 1.6l3.1 11.2-8.7-6.5c-.3-.2-.6-.3-.9-.3s-.6.1-.9.3l-8.7 6.5L11.6 23c.2-.6 0-1.2-.5-1.6l-8.6-7.2 10.6-.2c.6 0 1.2-.4 1.4-1L18 2.1M18 0c-.2 0-.4.1-.5.4l-4 12.2c-.1.2-.2.4-.5.4l-12 .3c-.5 0-.7.6-.3 1l9.6 7.9c.2.1.2.4.2.6L7 35.3c-.1.4.2.7.5.7.1 0 .2 0 .3-.1l9.9-7.4c.1-.1.2-.1.3-.1s.2 0 .3.1l9.9 7.4c.1.1.2.1.3.1.3 0 .6-.3.5-.7l-3.4-12.5c-.1-.2 0-.4.2-.6l9.6-7.9c.4-.3.2-.9-.3-1L23 13c-.2 0-.4-.1-.5-.4L18.5.4c-.1-.2-.3-.4-.5-.4z'/%3E%3C/svg%3E");

$star-unfilled-highlight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23EC8A28' d='M18 2.1l3.5 10.8c.2.6.8 1 1.4 1l10.8.3-8.6 7.2c-.5.4-.7 1-.5 1.6l3.1 11.2-8.7-6.5c-.3-.2-.6-.3-.9-.3s-.6.1-.9.3l-8.7 6.5L11.6 23c.2-.6 0-1.2-.5-1.6l-8.6-7.2 10.6-.2c.6 0 1.2-.4 1.4-1L18 2.1M18 0c-.2 0-.4.1-.5.4l-4 12.2c-.1.2-.2.4-.5.4l-12 .3c-.5 0-.7.6-.3 1l9.6 7.9c.2.1.2.4.2.6L7 35.3c-.1.4.2.7.5.7.1 0 .2 0 .3-.1l9.9-7.4c.1-.1.2-.1.3-.1s.2 0 .3.1l9.9 7.4c.1.1.2.1.3.1.3 0 .6-.3.5-.7l-3.4-12.5c-.1-.2 0-.4.2-.6l9.6-7.9c.4-.3.2-.9-.3-1L23 13c-.2 0-.4-.1-.5-.4L18.5.4c-.1-.2-.3-.4-.5-.4z'/%3E%3C/svg%3E");

$star-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23EC8A28' d='M18.5.4l4 12.2c.1.2.3.4.5.4l12 .3c.5 0 .7.6.3 1l-9.6 7.9c-.2.1-.2.4-.2.6L29 35.3c.1.5-.4.9-.8.6l-9.9-7.4c-.2-.1-.4-.1-.6 0l-9.9 7.4c-.4.3-.9-.1-.8-.6l3.4-12.5c.1-.2 0-.4-.2-.6L.6 14.3c-.4-.3-.2-.9.3-1L13 13c.2 0 .4-.1.5-.4l4-12.2c.2-.5.8-.5 1 0z'/%3E%3C/svg%3E");

// Container
.star-rating {
  font-size: 60px; // Sets size of stars
  position: relative;
  display: inline-block;
}

// Flex wrapper
.star-rating--display {
  display: flex;
  input[type="radio"]{
    display:none;
  }
}

// Labels
.star-rating--star {
  background-size: 1em;
 ...