Rating Stars with CSS

by Vallek

HTML

<form class="rating" action="" method="GET">
  <input type="radio" name="rating" value="1">
  <label for="rating"></label>
  <input type="radio" name="rating" value="2">
  <label for="rating"></label>
  <input type="radio" name="rating" value="3">
  <label for="rating"></label>
  <input type="radio" name="rating" value="4">
  <label for="rating"></label>
  <input type="radio" name="rating" value="5">
  <label for="rating"></label>
  <button type="submit">Оценить</button>
</form>

CSS

.rating label {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('https://image.flaticon.com/icons/svg/149/149222.svg');
}

.rating input {
	width: 1px;
	height: 1px;
	opacity: 0;
	position: absolute;
}

.rating input + label {
	background-image: url('https://image.flaticon.com/icons/svg/148/148841.svg');
}

.rating input:focus + label {
	outline: 1px dotted rgb(73, 107, 216);
}

input:checked ~ label:nth-of-type(n) {
	background-image: url('https://image.flaticon.com/icons/svg/149/149222.svg');
}

.rating input:checked + label {
	background-image: url('https://image.flaticon.com/icons/svg/148/148841.svg');
}