4

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>
melpomene
  • 84,125
  • 8
  • 85
  • 148
wpuzman
  • 340
  • 1
  • 5
  • 14

5 Answers5

3

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! :)

ReSedano
  • 4,970
  • 2
  • 18
  • 31
2

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

user37309
  • 597
  • 5
  • 14
  • 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. – wpuzman Nov 10 '18 at 17:13
  • 3
    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 '18 at 17:35
  • 1
    Kind of beautiful though – alotropico Sep 27 '20 at 14:17
1

Simple star rating with pure javascript.

HTML

<div id="rating_bar"> </div>

CSS

#rating_bar {
    width:100px;
    height:100px;
    display:inline-block;
    display:inline;
}

Javascript

var content ='';
  for(var i=1;i<=5;i++)
  content += ' <span id="rate_'+i+'">✰</span> ';
document.getElementById('rating_bar').innerHTML=content;
 
var spans = document.getElementById("rating_bar")
.getElementsByTagName('span');
for(i=0;i<spans.length;i++)
  spans[i].onmouseover=hoverStar;
  
function hoverStar() 
{
  for(i=0;i<this.id.charAt(5);i++)
    spans[i].innerText='⭐';
  for(i=this.id.charAt(5);i<5;i++)
    spans[i].innerText='✰';
}

Sample Output:

enter image description here

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Majedur
  • 3,074
  • 1
  • 30
  • 43
0

HTML

    <div class="rating" tabindex="1" onblur="calculateRating(this)">
      <i class="fa fa-star-o" aria-hidden="true" value="1" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="2" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="3" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="4" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="5" onclick="clickStar(this)"></i>
    </div>
    <div class="rating-display"></div>

CSS

.clicked{
color:yellow;}

JAVASCRIPT

var rating = document.querySelector(".rating");
var ratingDisplayEle = document.querySelector(".rating-display");

//add event listener
function clickStar(ele){
  var clickedStar = ele;
  //value of the star
  var ratingValue = parseInt(clickedStar.getAttribute("value"));
  //change the color of the star
  for(var i=0; i<ratingValue; i++){
    rating.children[i].classList.add("clicked");
    for(var j=ratingValue; j<=4; j++){
      if(rating.children[j].classList.contains("clicked")){
        rating.children[j].classList.remove("clicked");
      }
    }
  }
}

//function to calculate rating
function calculateRating(ele){
  //check how many elements are having clicked class
  var ratingCount = 0;
  for(var i=0; i<ele.children.length; i++){
    if(ele.children[i].classList.contains("clicked")){
      ratingCount++;
    }
  }
  ratingDisplayEle.textContent = `You have selected ${ratingCount} rating out of 5`;
}
Naveesh Kumar V
  • 51
  • 2
0

Simple star rating

function myFunction() {
var five = document.getElementById('1-star').checked;
document.getElementById("one").innerHTML = five;

}
/* component */

.star-rating {
  
  display:flex;
  flex-direction: row-reverse;
  font-size:3em;
  justify-content:space-around;
  padding:0 .2em;
  text-align:center;
  width:5em;
}

.star-rating input {
  display:none;
}

.star-rating label {
  color:#ccc;
  cursor:pointer;
}

.star-rating :checked ~ label {
  color:#f90;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color:#fc0;
}
<div class="star-rating">
  <input type="radio" id="5-stars" name="rating" value="5" />
  <label for="5-stars" class="star">&#9733;</label>
  <input type="radio" id="4-stars" name="rating" value="4" />
  <label for="4-stars" class="star">&#9733;</label>
  <input type="radio" id="3-stars" name="rating" value="3" />
  <label for="3-stars" class="star">&#9733;</label>
  <input type="radio" id="2-stars" name="rating" value="2" />
  <label for="2-stars" class="star">&#9733;</label>
  <input type="radio" id="1-star" name="rating" value="1" />
  <label for="1-star" class="star">&#9733;</label>
</div>
<p id="one" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
Nimantha
  • 6,405
  • 6
  • 28
  • 69
Progga Ilma
  • 578
  • 6
  • 8