<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="rating" align="center"> <input type="radio" id="star10" name="rating" value="10" /> <label class="good border" for="star10" title="Rocks!" >10</label> <input type="radio" id="star9" name="rating" value="9" /> <label class="good border" for="star9" title="Rocks!">9</label> <input type="radio" id="star8" name="rating" value="8" /> <label class="bad border" for="star8" title="Pretty good">8</label> <input type="radio" id="star7" name="rating" value="7" /> <label class="bad border" for="star7" title="Pretty good">7</label> <input type="radio" id="star6" name="rating" value="6" /> <label class="bad border" for="star6" title="Meh">6</label> <input type="radio" id="star5" name="rating" value="5" /> <label class="verybad border" for="star5" title="Meh">5</label> <input type="radio" id="star4" name="rating" value="4" /> <label class="verybad border" for="star4" title="Kinda bad">4</label> <input type="radio" id="star3" name="rating" value="3" /> <label class="verybad border" for="star3" title="Kinda bad">3</label> <input type="radio" id="star2" name="rating" value="2" /> <label class="verybad border" for="star2" title="Sucks big tim">2</label> <input type="radio" id="star1" name="rating" value="1" /> <label class="verybad border" for="star1" title="Sucks big time">1</label> </div> </div> </div>

.rating { float: left; } .rating:not(:checked)>input { position: absolute; top: -9999px; } .rating:not(:checked)>label { float: right; width: 1em; cursor: pointer; font-size: 150%; color: #ddd; } .rating>input:checked~label.good { color: rgb(71, 163, 43); } .rating:not(:checked)>label.good:hover, .rating:not(:checked)>label:hover~label.good { color: rgb(71, 163, 43); } .rating>input:checked~label.bad { color: rgb(255, 158, 30); } .rating:not(:checked)>label.bad:hover, .rating:not(:checked)>label:hover~label.bad { color: rgb(255, 158, 30); } .rating>input:checked~label.verybad { color: rgb(247, 19, 19); } .rating:not(:checked)>label.verybad:hover, .rating:not(:checked)>label:hover~label.verybad { color: rgb(247, 19, 19); } .rating>label:active { position: relative; top: 2px; left: 2px; } .border{ border-radius: 10px; margin-left: 3px; border:solid 2px grey; }