CODEWITHSUNDEEP
angularjscssangular-ui-bootstrap
user3439326
user3439326

Reputation: 97

Changing the color of the stars and display half star rating using AngularUI Star Rating

I am using Angular UI star rating, but I would like to perform the following 2 items. Any help is greatly appreciated!

  1. I would like change the color of the selected star ("stateOn: glyphicon-star') to yellow. Is there a way to do that?
  2. I also would like to display half star as well. For example, I want to display 3 1/2 stars. Can you please tell me how to do that?

Here is the rating tags for the star rating in AngularUI:

<rating value="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" </rating>

Upvotes: 4

Views: 5111

Answers (2)

Aman
Aman

Reputation: 45

.glyphicon-star : before, .glyphicon-star-empty: before{
  color:yellow;
}

This will also result into the same

Upvotes: 0

shaunhusain
shaunhusain

Reputation: 19748

Half stars will take some changes to the logic and possibly the CSS (I imagine something like if it has a remainder after drawing the number of stars it should for the floored value then draw a star in a container with half the width and no overflow, or maybe just make a half star icon). The color you can simply override in your own CSS like

.glyphicon-star, .glyphicon-star-empty {
  color:yellow;
}

Upvotes: 4

Related Questions