Stars rating form on CSS

by Vallek

HTML

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

CSS

.rating label {
	display: inline-block;
	width: 20px;
	height: 20px;
}

.rating input {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

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

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

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');
}

JavaScript

/* Js is only used here for show submitted value */
let inputs = document.querySelectorAll('input[type="radio"]');
let button = document.querySelector('.submit-button');
let field = document.querySelector('input[type="text"]');
button.addEventListener('click', checkIt);

function checkIt() {
	inputs.forEach(
		function checkChecked(item){
			if (item.checked == true) {
				field.value = item.value;
			}
		}
	) 
}