Рейтинг со звездочками на CSS

Рейтинг на 5 пунктов:

HTML:

<div class="full-stars">
    <div class="rating-group">
		<!-- по умолчанию 0 -->
        <input name="fst" value="0" type="radio" disabled checked />
		
		<!-- рейтинг 1 -->	
        <label for="fst-1">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
		</label>
        <input name="fst" id="fst-1" value="1" type="radio" />
		
		<!-- рейтинг 2 -->	
        <label for="fst-2">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
		</label>
        <input name="fst" id="fst-2" value="2" type="radio" />
		
		<!-- рейтинг 3 -->	
        <label for="fst-3">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
		</label>
        <input name="fst" id="fst-3" value="3" type="radio" />
		
		<!-- рейтинг 4 -->		
        <label for="fst-4">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
		</label>
        <input name="fst" id="fst-4" value="4" type="radio" />
		
		<!-- рейтинг 5 -->	
        <label for="fst-5">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
		</label>
        <input name="fst" id="fst-5" value="5" type="radio" />
	</div>
</div>

</label>

</label>

</label>

</label>

</label>

</div>

CSS:

.full-stars {
	text-align: center;
}
.full-stars .rating-group {
	display: inline-flex;
}
.full-stars input {
	position: absolute;
	left: -9999px;
}
.full-stars label {
	margin: 0;
	cursor: pointer;
}
.full-stars label svg {
	margin: 2px;
	height: 40px;
	width: 40px;
	fill: #337AB7;
	transition: fill 0.3s;
}
.full-stars input:checked ~ label svg {
	fill: #BFE2FF;
}
.full-stars .rating-group:hover label svg {
	fill: #337AB7;
}
.full-stars .rating-group input:hover ~ label svg {
	fill: #BFE2FF;
}

.full-stars {

text-align: center;

}

.full-stars .rating-group {

display: inline-flex;

}

.full-stars input {

position: absolute;

left: -9999px;

}

.full-stars label {

margin: 0;

cursor: pointer;

}

.full-stars label svg {

margin: 2px;

height: 40px;

width: 40px;

fill: #337AB7;

transition: fill 0.3s;

}

.full-stars input:checked ~ label svg {

fill: #BFE2FF;

}

.full-stars .rating-group:hover label svg {

fill: #337AB7;

}

.full-stars .rating-group input:hover ~ label svg {

fill: #BFE2FF;

}

Рейтинг на 10 пунктов:

HTML:

<div class="half-stars">
    <div class="rating-group">
		<!-- по умолчанию 0 -->
        <input disabled checked name="hsr" value="0" type="radio">
		
		<!-- рейтинг 0.5 -->	
        <label class="hsr" for="hsr-05">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 0c-11.4 0-22.8 5.9-28.7 17.8L194 150.2 47.9 171.4c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.1 23 46 46.4 33.7L288 439.6V0z"/></svg>			
		</label>
        <input name="hsr" id="hsr-05" value="0.5" type="radio">
		
		<!-- рейтинг 1 -->	
        <label for="hsr-10">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>			
		</label>
        <input name="hsr" id="hsr-10" value="1" type="radio">
		
		<!-- рейтинг 1.5 -->	
        <label class="hsr" for="hsr-15">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 0c-11.4 0-22.8 5.9-28.7 17.8L194 150.2 47.9 171.4c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.1 23 46 46.4 33.7L288 439.6V0z"/></svg>		
		</label>
        <input name="hsr" id="hsr-15" value="1.5" type="radio">
		
		<!-- рейтинг 2 -->	
        <label for="hsr-20">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>			
		</label>
        <input name="hsr" id="hsr-20" value="2" type="radio">
		
		<!-- рейтинг 2.5 -->	
        <label class="hsr" for="hsr-25">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 0c-11.4 0-22.8 5.9-28.7 17.8L194 150.2 47.9 171.4c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.1 23 46 46.4 33.7L288 439.6V0z"/></svg>			
		</label>
        <input name="hsr" id="hsr-25" value="2.5" type="radio">
		
		<!-- рейтинг 3 -->	
        <label for="hsr-30">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>			
		</label>
        <input name="hsr" id="hsr-30" value="3" type="radio">
		
		<!-- рейтинг 3.5 -->	
        <label class="hsr" for="hsr-35">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 0c-11.4 0-22.8 5.9-28.7 17.8L194 150.2 47.9 171.4c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.1 23 46 46.4 33.7L288 439.6V0z"/></svg>			
		</label>
        <input name="hsr" id="hsr-35" value="3.5" type="radio">
		
		<!-- рейтинг 4 -->	
        <label for="hsr-40">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>			
		</label>
        <input name="hsr" id="hsr-40" value="4" type="radio">
		
		<!-- рейтинг 4.5 -->	
        <label class="hsr" for="hsr-45">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 0c-11.4 0-22.8 5.9-28.7 17.8L194 150.2 47.9 171.4c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.1 23 46 46.4 33.7L288 439.6V0z"/></svg>			
		</label>
        <input name="hsr" id="hsr-45" value="4.5" type="radio">
		
		<!-- рейтинг 5 -->	
        <label for="hsr-50">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>			
		</label>
        <input name="hsr" id="hsr-50" value="5" type="radio">
	</div>
</div>

</label>

</label>

</label>

</label>

</label>

</label>

</label>

</label>

</label>

</label>

</div>

label для дробных вариантов (половина звезды) имеет класс hsr

CSS:

.half-stars {
	text-align: center;
}
.half-stars .rating-group {
	display: inline-flex;
}
.half-stars input {
	position: absolute;
	left: -9999px;
}
.half-stars label {
	margin: 0;
	cursor: pointer;
}
.half-stars label svg {
	margin: 2px;
	height: 40px;
	width: 40px;
	fill: #337AB7;
	transition: fill 0.3s;
}
.half-stars .hsr {
	padding-right: 0;
	margin-right: -22px;
	width: 22px;
	overflow: hidden;
	z-index: 2;
}
.half-stars input:checked ~ label svg {
	fill: #BFE2FF;
}
.half-stars .rating-group:hover label svg {
	fill: #337AB7;
}
.half-stars .rating-group input:hover ~ label svg {
	fill: #BFE2FF;
}

.half-stars {

text-align: center;

}

.half-stars .rating-group {

display: inline-flex;

}

.half-stars input {

position: absolute;

left: -9999px;

}

.half-stars label {

margin: 0;

cursor: pointer;

}

.half-stars label svg {

margin: 2px;

height: 40px;

width: 40px;

fill: #337AB7;

transition: fill 0.3s;

}

.half-stars .hsr {

padding-right: 0;

margin-right: -22px;

width: 22px;

overflow: hidden;

z-index: 2;

}

.half-stars input:checked ~ label svg {

fill: #BFE2FF;

}

.half-stars .rating-group:hover label svg {

fill: #337AB7;

}

.half-stars .rating-group input:hover ~ label svg {

fill: #BFE2FF;

}

Если на сайте подключены графические шрифты, такие как FontAwesome, SVG-графику можно заменить на них, уменьшив тем самым HTML-код.

Также можно использовать различные спецсимволы или эмодзи, не забывая о том, что в каждом браузере они показываются по-разному.

Если при смене SVG-звездочек на шрифт не получится изменить CSS, напишите об этом в комментариях, постараюсь помочь.

Алексей Скотч: 29.05.2025 в 13:22

Здравствуйте! Потрясающий пост. А как свои зведочки сделать? (на своих изображениях)

Ответить
- Alexander: 30.05.2025 в 13:46
  
  SVG ставьте свои и все.
  Можно даже во втором варианте использовать одинаковые звездочки (без половины)
  
  Ответить

Рейтинг на 5 пунктов:

HTML:

CSS:

Рейтинг на 10 пунктов:

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Комментарии: