OpenCart Community Forum - Discuss shopping cart and e-commerce solutions.
https://forum.opencart.com/
Code: Select all
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ entry_rating }}</label>
{{ entry_bad }}
<input type="radio" name="rating" value="1" />
<input type="radio" name="rating" value="2" />
<input type="radio" name="rating" value="3" />
<input type="radio" name="rating" value="4" />
<input type="radio" name="rating" value="5" />
{{ entry_good }}</div>
</div>Code: Select all
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ entry_rating }}</label>
{{ entry_bad }}
<div class="star-rating">
<input id="star-5" type="radio" name="rating" value="5" />
<label for="star-5" title="5 stars">★</label>
<input id="star-4" type="radio" name="rating" value="4" />
<label for="star-4" title="4 stars">★</label>
<input id="star-3" type="radio" name="rating" value="3" />
<label for="star-3" title="3 stars">★</label>
<input id="star-2" type="radio" name="rating" value="2" />
<label for="star-2" title="2 stars">★</label>
<input id="star-1" type="radio" name="rating" value="1" />
<label for="star-1" title="1 star">★</label>
</div>
{{ entry_good }}
</div>
</div>
<style>
.star-rating {
direction: rtl;
display: inline-block;
padding: 20px;
}
.star-rating input[type=radio] {
display: none;
}
.star-rating label {
color: #bbb;
font-size: 35px;
padding: 0;
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input[type=radio]:checked ~ label {
color: #f2b600;
}
</style>