Posh UI

Rating

Rating can be used to show ratings on the product, or it can also be used for taking ratings from the user.

Filled Rating

★ ★ ★ ★ ★ 
              
<span class="rating-star filled"> &#9733; </span>
<span class="rating-star filled"> &#9733; </span>
<span class="rating-star filled"> &#9733; </span>
<span class="rating-star"> &#9733; </span>
<span class="rating-star"> &#9733; </span>

Live Rating

              
<fieldset class="ratings">
  <input type="radio" name="rating" id="star-5" />
  <label for="star-5">
    &#9733;
  </label>
  <input type="radio" name="rating" id="star-4-n-half" />
  <label for="star-4-n-half" class="half-star">
    &#9733;
  </label>
  <input type="radio" name="rating" id="star-4" />
  <label for="star-4">
    &#9733;
  </label>
  <input type="radio" name="rating" id="star-3-n-half" />
  <label for="star-3-n-half" class="half-star">
    &#9733;
  </label>
  <input type="radio" name="rating" id="star-3" />
  <label for="star-3">
    &#9733;
  </label>
  <input type="radio" name="rating" id="star-2-n-half" />
  <label for="star-2-n-half" class="half-star">
    &#9733;
  </label>
  <input type="radio" name="rating" id="star-2" />
  <label for="star-2">
    &#9733;
  </label>
  <input type="radio" name="rating" id="star-1-n-half" />
  <label for="star-1-n-half" class="half-star">
    &#9733;
  </label>
  <input type="radio" name="rating" id="star-1" />
  <label for="star-1">
    &#9733;
  </label>
</fieldset>