Hodnocení, jen CSS

by Petr Haluza

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<fieldset id="SetRating">     
  <input type="radio" name="stars" id="4_stars" value="4" >
  <label class="stars" for="4_stars">4 stars</label>
  <input type="radio" name="stars" id="3_stars" value="3" >
  <label class="stars" for="3_stars">3 stars</label>
  <input type="radio" name="stars" id="2_stars" value="2" >
  <label class="stars" for="2_stars">2 stars</label>
  <input type="radio" name="stars" id="1_stars" value="1" >
  <label class="stars" for="1_stars">1 star</label>
  <input type="radio" name="stars" id="0_stars" value="0" >
  <label class="stars" for="0_stars">0 star</label>
  <span  class="">Vaše celkové hodnocení: </span>
</fieldset>

CSS

#SetRating {width:400px; position:relative;}
#SetRating label { text-indent: -100px; width: 30px !important; height: 30px; overflow: hidden; cursor: pointer; } 
#SetRating input[type="radio"] { position: absolute; left: -5000px;}
#SetRating input[type="radio"], 
#SetRating label.stars { float: right; line-height: 30px; height: 30px;}
#SetRating span + input[type=radio] + label,
#SetRating legend + input[type=radio] + label { counter-reset: checkbox; }
#SetRating label.stars { position:relative;}
#SetRating label.stars:before { font-family: 'FontAwesome';  content:"\f006"; display:block; width:30px; height:30px; position:absolute; text-indent: 1px;}
#SetRating label.stars:hover ~ label.stars, 
#SetRating label.stars:hover, 
#SetRating input[type=radio][name=stars]:checked ~ label.stars { counter-increment: checkbox;}
#SetRating label.stars:hover ~ label.stars:before, 
#SetRating label.stars:hover:before, 
#SetRating input[type=radio][name=stars]:checked ~ label.stars:before { font-family: 'FontAwesome'; content:"\f005"; display:block; width:30px; height:30px; position:absolute; text-indent: 1px;}
#SetRating span:after { content: counter(checkbox) " / 5"; }