How to fix star rating css and html - html

Question

So basically I have a ionic mobile application. One of the many modules in the app is the review and ratings. So by implementing such module, I added stars in which a user can click whether he wants to rate a certain user by tapping one star to five stars. So the problem here is that, once a choose a certain star, example 5 then he taps other parts in the app the stars will be gone.
After choosing a star:
and the user taps other than the star rating, the star choosen will be gone. How to fix such error?
Code below:
html
<div class="rating">
<!-- <ion-icon name="star"></ion-icon> -->
<span (click)="rate(5)">☆</span>
<span (click)="rate(4)">☆</span>
<span (click)="rate(3)">☆</span>
<span (click)="rate(2)">☆</span>
<span (click)="rate(1)">☆</span>
CSS
page-review {
.rating {
display: flex;
justify-content: center;
}
.rating>span:hover:before {
content: "\2605";
position: absolute;
}
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating>span:hover:before,
.rating>span:hover~span:before {
content: "\2605";
position: absolute;
}
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating>span {
display: inline-block;
position: relative;
width: 1.1em;
font-size: 40px;
color: #F2AF01;
}
.rating>span:hover:before,
.rating>span:hover~span:before {
content: "\2605";
position: absolute;
}
p{
font-size: 20px;
}
.review-description{
margin-bottom: 50px;
}
}

Answer 1

you can use ionic-ratings
when you do all steps to install and import then you can use it like
$scope.ratingsObject = {
iconOn: 'ion-ios-star', //Optional
iconOff: 'ion-ios-star-outline', //Optional
iconOnColor: 'rgb(200, 200, 100)', //Optional
iconOffColor: 'rgb(200, 100, 100)', //Optional
rating: 2, //Optional
minRating:1, //Optional
readOnly: true, //Optional
callback: function(rating, index) { //Mandatory
$scope.ratingsCallback(rating, index);
}
};
$scope.ratingsCallback = function(rating, index) {
console.log('Selected rating is : ', rating, ' and the index is : ', index);
};

Answer 2

Well, you're using :hover and a really interesting combination of inverted HTML order and text direction switching in order to use the ~ general sibling selector to fill the previous stars, which is awesome.
But you're making so by using CSS :hover, which is really meant for when the mouse hovers an element on desktop. As soon as the pointer leaves, the :hover state ends, and therefore, any style that was applied on hover by CSS will go away.
On mobile, there's no really :hover state as theres no mouse pointer to begin with, but some engines use the taps instead.. but then again, when you tap anywhere else, the "pointer" will no longer be over the element, so the :hover state ends.
I'm not familiar with ionic, but it seems you'll need to modify whatever your rate() method is (or add another method on click) to display the current value.
A simple approach from the CSS point of view would be to use a CSS "selected" class identical to the :hover state, which you would add to the selected element on click (and remove from the others if present).
From the CSS point of view, should be something like this:
.rating>span.selected:before,
.rating>span.selected~span:before {
content: "\2605";
position: absolute;
}
To keep it DRY, you might just add it on the same rule as you're setting the hovers
.rating>span:hover:before,
.rating>span:hover~span:before,
.rating>span.selected:before,
.rating>span.selected~span:before {
content: "\2605";
position: absolute;
}
BTW, you have 2 identical copies of your .rating and .rating>span:hover~span:before rules, and 3 identical copies of .rating>span:hover:before rule, you might want to clean that as well.