Стилизуем оценку рейтинга звездами

В одной из шпаргалок я написал собственный плагин для WordPress, который расширял рейтингом обычные комментарии движка. Эта шпаргалка здесь.

В этой шпаргалке, я рассмотрю как сделать стилизацию ridiobutton под звезды двумя способами, один из которых будет работать когда функционирует клик на label и второй, когда на label клик не срабатывает, в моей практике было и такое, как правило связано это с тем, что на странице повторяются формы или id инпутов.

Простой способ, когда клик на label срабатывает

Добавляем в нужном месте html и стилизуем его.

html

<div class="rating-area">
	<input type="radio" id="star-5" name="rating" value="5">
	<label for="star-5" title="Оценка «5»"></label>	
	<input type="radio" id="star-4" name="rating" value="4">
	<label for="star-4" title="Оценка «4»"></label>    
	<input type="radio" id="star-3" name="rating" value="3">
	<label for="star-3" title="Оценка «3»"></label>  
	<input type="radio" id="star-2" name="rating" value="2">
	<label for="star-2" title="Оценка «2»"></label>    
	<input type="radio" id="star-1" name="rating" value="1">
	<label for="star-1" title="Оценка «1»"></label>
</div>

css

.rating-area {
	overflow: hidden;
	width: 265px;
	margin: 0 auto;
}
.rating-area:not(:checked) > input {
	display: none;
}
.rating-area:not(:checked) > label {
	float: right;
	width: 42px;
	padding: 0;
	cursor: pointer;
	font-size: 32px;
	line-height: 32px;
	color: lightgrey;
	text-shadow: 1px 1px #bbb;
}
.rating-area:not(:checked) > label:before {
	content: '★';
}
.rating-area > input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px #c60;
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
	color: gold;
}
.rating-area > input:checked + label:hover,
.rating-area > input:checked + label:hover ~ label,
.rating-area > input:checked ~ label:hover,
.rating-area > input:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
	position: relative;
}

Второй вариант, применяем тогда когда клик по label не срабатывает

Добавляем в нужном месте html и стилизуем его и добавляем небольшой скрипт.

html

function extend_comment_custom_fields() {

	echo '<p class="comment-form-rating">'.
			  '<label for="rating">'. __('Рейтинг') . '<span class="required">*</span></label>
			  <span class="commentratingbox">';

		echo '
		<label class="commentrating" style="display:inline-block;">
			<input class="commentrating-input" type="radio" name="rating" id="rating" value="5"/><span>★</span>   
		</label>
		<label class="commentrating" style="display:inline-block;">
			<input class="commentrating-input" type="radio" name="rating" id="rating" value="4"/><span>★</span>   
		</label>
		<label class="commentrating" style="display:inline-block;">
			<input class="commentrating-input" type="radio" name="rating" id="rating" value="3"/><span>★</span>   
		</label>
		<label class="commentrating" style="display:inline-block;">
			<input class="commentrating-input" type="radio" name="rating" id="rating" value="2"/><span>★</span>   
		</label>
		<label class="commentrating" style="display:inline-block;">
			<input class="commentrating-input" type="radio" name="rating" id="rating" value="1"/><span>★</span>   
		</label>';

	echo'</span></p>';
}

css

/*CТИЛИ ЗВЕЗД НА КОММЕНТАРИЯХ*/
.commentratingbox {
	display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;}
label.commentrating span {
	cursor: pointer;
	font-size: 25px;}
label.commentrating span.check_star {
	font-weight: 900;
	color: gold!important;}
#modalForm_Feedback input.commentrating-input {
	display: none!important;}

#modalForm_Feedback input[type="radio"]:not(:checked) + span {
	color: lightgrey;}
#modalForm_Feedback input[type="radio"]:checked + span {
	font-weight: 900;
	color: gold;}
#modalForm_Feedback input[type="radio"]:not(:checked):hover + span {
	color: gold;}
#modalForm_Feedback label.commentrating:hover ~ label.commentrating span {
	color: gold;}

jquery

<script>
$('.commentrating-input').on('click', function() {
    console.log ("Кликнули по звезде рейтинга");
	$('span').each(function () {
		$(this).removeClass('check_star');
	});
	$('.commentrating-input').each(function () {
		$(this).removeClass('check');
	});
	$(this).addClass('check');
	let find = $('input.check').parent().nextAll().find('span').addClass('check_star');
	console.log (find);
});
</script>