How can i change the radio button in star rating

Code: Select all

<div class="form-group required">
  <div class="col-sm-12">
	<label class="control-label">{{ entry_rating }}</label>
	&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
	<input type="radio" name="rating" value="1" />
	&nbsp;
	<input type="radio" name="rating" value="2" />
	&nbsp;
	<input type="radio" name="rating" value="3" />
	&nbsp;
	<input type="radio" name="rating" value="4" />
	&nbsp;
	<input type="radio" name="rating" value="5" />
	&nbsp;{{ entry_good }}</div>
</div>

Code: Select all

<div class="form-group required">
  <div class="col-sm-12">
		<label class="control-label">{{ entry_rating }}</label>
		&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
		<div class="star-rating">
			<input id="star-5" type="radio" name="rating" value="5" />
			<label for="star-5" title="5 stars">★</label>
			&nbsp;
			<input id="star-4" type="radio" name="rating" value="4" />
			<label for="star-4" title="4 stars">★</label>
			&nbsp;
			<input id="star-3" type="radio" name="rating" value="3" />
			<label for="star-3" title="3 stars">★</label>
			&nbsp;
			<input id="star-2" type="radio" name="rating" value="2" />
			<label for="star-2" title="2 stars">★</label>
			&nbsp;
			<input id="star-1" type="radio" name="rating" value="1" />
			<label for="star-1" title="1 star">★</label>
		</div>
		&nbsp;{{ 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>