CSS Star Rating control with radio buttons - HTML CSS CSS Form

HTML CSS examples for CSS Form:input radio button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input radio button

Description

CSS Star Rating control with radio buttons

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.stars {<!--  w w  w . j a v a2s  .c o m-->
   float: left;
   overflow: hidden;
   width: 100%;
}
.stars input[type=radio]:checked ~ label:after {
   background: blue;
}
.stars input[type=radio] {
   display: none;
}
.stars input[type=radio]:first-child + label {
   padding-right: 0;
}
.stars:hover input[type=radio]:checked ~ label:after,
.stars label:after {
   background: green;
}
.stars label {
   box-sizing: border-box;
   width: 20%;
   padding-right: 2%;
   height: 120px;
   float: right;
   cursor: pointer;
}
.stars label:after {
   display: block;
   content: "";
   height: 120px;
   width: 100%;
   float: right;
   transition: all 0.25s;
   background: green;
}
.stars label:hover:after,
.stars label:hover ~ label:after {
   background: gold !important;
}


      </style> 
 </head> 
 <body> 
  <div class="stars"> 
   <input type="radio" id="rate-5" name="rating-1"> 
   <label for="rate-5"></label> 
   <input type="radio" id="rate-4" name="rating-1"> 
   <label for="rate-4"></label> 
   <input type="radio" id="rate-3" name="rating-1"> 
   <label for="rate-3"></label> 
   <input type="radio" id="rate-2" name="rating-1"> 
   <label for="rate-2"></label> 
   <input type="radio" id="rate-1" name="rating-1"> 
   <label for="rate-1"></label> 
  </div>  
 </body>
</html>

Related Tutorials