Monday, May 25, 2015

CSS- Star Rating Input using CSS and HTML

CSS- Star Rating Input using CSS and HTML

<p>
      Rating:
      <span class="starRating">
        <input id="rating5" type="radio" name="rating" value="5">
        <label for="rating5">5</label>
        <input id="rating4" type="radio" name="rating" value="4">
        <label for="rating4">4</label>
        <input id="rating3" type="radio" name="rating" value="3" checked>
        <label for="rating3">3</label>
        <input id="rating2" type="radio" name="rating" value="2">
        <label for="rating2">2</label>
        <input id="rating1" type="radio" name="rating" value="1">
        <label for="rating1">1</label>
      </span>
    </p>
   
    <style>
    .starRating:not(old){
          display        : inline-block;
          width          : 7.5em;
          height         : 1.5em;
          overflow       : hidden;
          vertical-align : bottom;
        }

        .starRating:not(old) > input{
          margin-right : -100%;
          opacity      : 0;
        }

        .starRating:not(old) > label{
          display         : block;
          float           : right;
          position        : relative;
          background      : url('star-off.png');
          background-size : contain;
        }

        .starRating:not(old) > label:before{
          content         : '';
          display         : block;
          width           : 1.5em;
          height          : 1.5em;
          background      : url('star-on.png');
          background-size : contain;
          opacity         : 0;
          transition      : opacity 0.2s linear;
        }

        .starRating:not(old) > label:hover:before,
        .starRating:not(old) > label:hover ~ label:before,
        .starRating:not(:hover) > :checked ~ label:before{
          opacity : 1;
        }
    </style>

Note: Be sure  'star-off.png' and 'star-on.png' exist .

No comments :

Post a Comment