Hi, i am using NopCommerce version 3.90.
I would like to change the radio buttons to stars that get grayed out/colored when selected.
How would i be able to achieve this?
Thanks.
@Html.RadioButtonFor(model => model.AddProductReview.Rating, "1", new { id = "addproductrating_1" })
<label class="vote-star" for="addproductrating_1">@T("Reviews.Fields.Rating") 1</label>
@Html.RadioButtonFor(model => model.AddProductReview.Rating, "2", new { id = "addproductrating_2" })
<label class="vote-star" for="addproductrating_2">@T("Reviews.Fields.Rating") 2</label>
@Html.RadioButtonFor(model => model.AddProductReview.Rating, "3", new { id = "addproductrating_3" })
<label class="vote-star" for="addproductrating_3">@T("Reviews.Fields.Rating") 3</label>
@Html.RadioButtonFor(model => model.AddProductReview.Rating, "4", new { id = "addproductrating_4" })
<label class="vote-star" for="addproductrating_4">@T("Reviews.Fields.Rating") 4</label>
@Html.RadioButtonFor(model => model.AddProductReview.Rating, "5", new { id = "addproductrating_5" })
<label class="vote-star" for="addproductrating_5">@T("Reviews.Fields.Rating") 5</label>
.write-review .rating-options .vote-star {
display: inline-block;
width: 17px;
height: 16px;
background: url(star_img_url) no-repeat center;
font-size: 0;
margin: 0;
cursor: pointer;
}
.write-review .rating-options input[type='radio'] {
position: absolute;
z-index: -1;
opacity: 0;
}
.write-review .rating-options input[type='radio']:checked ~ label {
background: url(blank_star_img_url) no-repeat center;
}
.write-review .rating-options input[type='radio']:checked + label {
background: url(star_img_url) no-repeat center;
}