How to make simple star rating?
up vote
3
down vote
favorite
I make my own star rating with html css, but it is not working true. If i use direction: rtl or float: right it works but i can't use rtl or float:right because of php.
How can i make it with pure css and html?
$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
font-size: 0;
text-decoration: none;
}
.stars a:before {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>javascript jquery html css rating
edited Nov 10 at 16:32
melpomene
56.1k54387
asked Nov 10 at 15:48
user10633395
183
add a comment |
up vote
3
down vote
favorite
I make my own star rating with html css, but it is not working true. If i use direction: rtl or float: right it works but i can't use rtl or float:right because of php.
How can i make it with pure css and html?
$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
font-size: 0;
text-decoration: none;
}
.stars a:before {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>javascript jquery html css rating
edited Nov 10 at 16:32
melpomene
56.1k54387
asked Nov 10 at 15:48
user10633395
183
"I can't use rtl or float:right because of php" care to elaborate?
– freedomn-m
Nov 10 at 17:41
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
I make my own star rating with html css, but it is not working true. If i use direction: rtl or float: right it works but i can't use rtl or float:right because of php.
How can i make it with pure css and html?
$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
font-size: 0;
text-decoration: none;
}
.stars a:before {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>javascript jquery html css rating
edited Nov 10 at 16:32
melpomene
56.1k54387
asked Nov 10 at 15:48
user10633395
183
I make my own star rating with html css, but it is not working true. If i use direction: rtl or float: right it works but i can't use rtl or float:right because of php.
How can i make it with pure css and html?
$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
font-size: 0;
text-decoration: none;
}
.stars a:before {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
font-size: 0;
text-decoration: none;
}
.stars a:before {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
font-size: 0;
text-decoration: none;
}
.stars a:before {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>javascript jquery html css rating
javascript jquery html css rating
edited Nov 10 at 16:32
melpomene
56.1k54387
asked Nov 10 at 15:48
user10633395
183
edited Nov 10 at 16:32
melpomene
56.1k54387
asked Nov 10 at 15:48
user10633395
183
edited Nov 10 at 16:32
melpomene
56.1k54387
edited Nov 10 at 16:32
melpomene
56.1k54387
edited Nov 10 at 16:32
melpomene
56.1k54387
56.1k54387
asked Nov 10 at 15:48
user10633395
183
asked Nov 10 at 15:48
user10633395
183
asked Nov 10 at 15:48
user10633395
183
183
"I can't use rtl or float:right because of php" care to elaborate?
– freedomn-m
Nov 10 at 17:41
add a comment |
"I can't use rtl or float:right because of php" care to elaborate?
– freedomn-m
Nov 10 at 17:41
"I can't use rtl or float:right because of php" care to elaborate?
– freedomn-m
Nov 10 at 17:41
"I can't use rtl or float:right because of php" care to elaborate?
– freedomn-m
Nov 10 at 17:41
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
accepted
Starting to your HTML, I tried to reverse the color's change 'cause in pure CSS + & ~ works only on next elements. Then why you don't make the next a gray and not blue?
I tried to play only with your CSS, but I had to add also a class to span to work with active situation. Sorry :P
This is the result:
$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>Hope it helps! :)
answered Nov 10 at 17:48
ReSedano
2,0852415
Perfect :) thanks.
– user10633395
Nov 10 at 18:20
You're welcome ;)
– ReSedano
Nov 10 at 18:35
add a comment |
up vote
0
down vote
This uses radio buttons to achieve the effect
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
https://codepen.io/jamesbarnett/pen/vlpkh
answered Nov 10 at 16:46
user37309
112
It uses 5,4,3,2,1 and float left. This same with 1,2,3,4,5 + float:right. So it is not solution for my answer.
– user10633395
Nov 10 at 17:13
1
The main purpose of your question seems to be making it with "pure CSS and HTML", and you have JavaScript in your Q so i assumed that is what you were looking for. You may want to rephrase your question.
– user37309
Nov 10 at 17:35
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
Starting to your HTML, I tried to reverse the color's change 'cause in pure CSS + & ~ works only on next elements. Then why you don't make the next a gray and not blue?
I tried to play only with your CSS, but I had to add also a class to span to work with active situation. Sorry :P
This is the result:
$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>Hope it helps! :)
answered Nov 10 at 17:48
ReSedano
2,0852415
Perfect :) thanks.
– user10633395
Nov 10 at 18:20
You're welcome ;)
– ReSedano
Nov 10 at 18:35
add a comment |
up vote
0
down vote
accepted
Starting to your HTML, I tried to reverse the color's change 'cause in pure CSS + & ~ works only on next elements. Then why you don't make the next a gray and not blue?
I tried to play only with your CSS, but I had to add also a class to span to work with active situation. Sorry :P
This is the result:
$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>Hope it helps! :)
answered Nov 10 at 17:48
ReSedano
2,0852415
Perfect :) thanks.
– user10633395
Nov 10 at 18:20
You're welcome ;)
– ReSedano
Nov 10 at 18:35
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
Starting to your HTML, I tried to reverse the color's change 'cause in pure CSS + & ~ works only on next elements. Then why you don't make the next a gray and not blue?
I tried to play only with your CSS, but I had to add also a class to span to work with active situation. Sorry :P
This is the result:
$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>Hope it helps! :)
answered Nov 10 at 17:48
ReSedano
2,0852415
Starting to your HTML, I tried to reverse the color's change 'cause in pure CSS + & ~ works only on next elements. Then why you don't make the next a gray and not blue?
I tried to play only with your CSS, but I had to add also a class to span to work with active situation. Sorry :P
This is the result:
$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>Hope it helps! :)
$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>answered Nov 10 at 17:48
ReSedano
2,0852415
answered Nov 10 at 17:48
ReSedano
2,0852415
answered Nov 10 at 17:48
ReSedano
2,0852415
answered Nov 10 at 17:48
ReSedano
2,0852415
2,0852415
Perfect :) thanks.
– user10633395
Nov 10 at 18:20
You're welcome ;)
– ReSedano
Nov 10 at 18:35
add a comment |
Perfect :) thanks.
– user10633395
Nov 10 at 18:20
You're welcome ;)
– ReSedano
Nov 10 at 18:35
Perfect :) thanks.
– user10633395
Nov 10 at 18:20
Perfect :) thanks.
– user10633395
Nov 10 at 18:20
You're welcome ;)
– ReSedano
Nov 10 at 18:35
You're welcome ;)
– ReSedano
Nov 10 at 18:35
add a comment |
up vote
0
down vote
This uses radio buttons to achieve the effect
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
https://codepen.io/jamesbarnett/pen/vlpkh
answered Nov 10 at 16:46
user37309
112
It uses 5,4,3,2,1 and float left. This same with 1,2,3,4,5 + float:right. So it is not solution for my answer.
– user10633395
Nov 10 at 17:13
1
The main purpose of your question seems to be making it with "pure CSS and HTML", and you have JavaScript in your Q so i assumed that is what you were looking for. You may want to rephrase your question.
– user37309
Nov 10 at 17:35
add a comment |
up vote
0
down vote
This uses radio buttons to achieve the effect
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
https://codepen.io/jamesbarnett/pen/vlpkh
answered Nov 10 at 16:46
user37309
112
It uses 5,4,3,2,1 and float left. This same with 1,2,3,4,5 + float:right. So it is not solution for my answer.
– user10633395
Nov 10 at 17:13
1
The main purpose of your question seems to be making it with "pure CSS and HTML", and you have JavaScript in your Q so i assumed that is what you were looking for. You may want to rephrase your question.
– user37309
Nov 10 at 17:35
add a comment |
up vote
0
down vote
up vote
0
down vote
This uses radio buttons to achieve the effect
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
https://codepen.io/jamesbarnett/pen/vlpkh
answered Nov 10 at 16:46
user37309
112
This uses radio buttons to achieve the effect
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
https://codepen.io/jamesbarnett/pen/vlpkh
answered Nov 10 at 16:46
user37309
112
answered Nov 10 at 16:46
user37309
112
answered Nov 10 at 16:46
user37309
112
answered Nov 10 at 16:46
user37309
112
112
It uses 5,4,3,2,1 and float left. This same with 1,2,3,4,5 + float:right. So it is not solution for my answer.
– user10633395
Nov 10 at 17:13
1
The main purpose of your question seems to be making it with "pure CSS and HTML", and you have JavaScript in your Q so i assumed that is what you were looking for. You may want to rephrase your question.
– user37309
Nov 10 at 17:35
add a comment |
It uses 5,4,3,2,1 and float left. This same with 1,2,3,4,5 + float:right. So it is not solution for my answer.
– user10633395
Nov 10 at 17:13
1
The main purpose of your question seems to be making it with "pure CSS and HTML", and you have JavaScript in your Q so i assumed that is what you were looking for. You may want to rephrase your question.
– user37309
Nov 10 at 17:35
It uses 5,4,3,2,1 and float left. This same with 1,2,3,4,5 + float:right. So it is not solution for my answer.
– user10633395
Nov 10 at 17:13
It uses 5,4,3,2,1 and float left. This same with 1,2,3,4,5 + float:right. So it is not solution for my answer.
– user10633395
Nov 10 at 17:13
1
1
The main purpose of your question seems to be making it with "pure CSS and HTML", and you have JavaScript in your Q so i assumed that is what you were looking for. You may want to rephrase your question.
– user37309
Nov 10 at 17:35
The main purpose of your question seems to be making it with "pure CSS and HTML", and you have JavaScript in your Q so i assumed that is what you were looking for. You may want to rephrase your question.
– user37309
Nov 10 at 17:35
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240610%2fhow-to-make-simple-star-rating%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"I can't use rtl or float:right because of php" care to elaborate?
– freedomn-m
Nov 10 at 17:41