title: Html/CSS Star Rating Feedback
body: <p>I have to implement a Star rating Feedback on articles in Visualforce page . I have seen the code in <a href="http://codepen.io/rogie/pen/GIfqc" rel="nofollow">http://codepen.io/rogie/pen/GIfqc</a> which perfectly suits my requirement . But don't know why it doesn't work when i put the whole code in a file and execute . Also it doesn't work in Firefox . Can anyone help me out here..??</p>
  
  <p>@IamDesai - Here is my code</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
  .star-rating{
  font-size:0;
  white-space:nowrap;
  display:inline-block;
  width:250px;
  height:50px;
  overflow:hidden;
  position:relative;
  background:
  url('data:image/svg+xml;utf-8,&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px"     viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"&gt;&lt;polygon     fill="#DDDDDD" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/&gt;&lt;/svg&gt;');
  background-size: contain;
  }
  i{
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background: 
      url('data:image/svg+xml;utf-8,&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"&gt;&lt;polygon fill="#FFDF88" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/&gt;&lt;/svg&gt;');  
  background-size: contain;
  }
  input{ 
  -moz-appearance:none;
  -webkit-appearance:none;
  opacity: 0;
  display:inline-block;
  width: 20%;
  height: 100%; 
  margin:0;
  padding:0;
  z-index: 2;
  position: relative;
  &amp;:hover + i,
  &amp;:checked + i{
  opacity:1;    
  }
  }
  i ~ i{
  width: 40%;
  }
  i ~ i ~ i{
  width: 60%;
  }
  i ~ i ~ i ~ i{
  width: 80%;
  }
  i ~ i ~ i ~ i ~ i{
  width: 100%;
  }
  }
  
  
  .choice{
  position: fixed;
  top: 0;
  left:0;
  right:0;
  text-align: center;
  padding: 20px;
  display:block;
  }
  
  *, ::after, ::before{
  height: 100%;
  padding:0;
  margin:0;
  box-sizing: border-box;
  text-align: center;  
  vertical-align: middle;
  }
  
  body{
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  Helvetica, Arial, "Lucida Grande", sans-serif;
  &amp;::before{
  height: 100%;
  content:'';
  width:0;
  background:red;
  vertical-align: middle;
  display:inline-block;
  }
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;$(':radio').change(
  function(){
  $('.choice').text( $(this).val() + ' stars' );
  } 
  )&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;strong class="choice"&gt;Choose a rating&lt;/strong&gt;&lt;br&gt;
  &lt;span class="star-rating"&gt;
  &lt;input type="radio" name="rating" value="1"&gt;&lt;i&gt;&lt;/i&gt;
  &lt;input type="radio" name="rating" value="2"&gt;&lt;i&gt;&lt;/i&gt;
  &lt;input type="radio" name="rating" value="3"&gt;&lt;i&gt;&lt;/i&gt;
  &lt;input type="radio" name="rating" value="4"&gt;&lt;i&gt;&lt;/i&gt;
  &lt;input type="radio" name="rating" value="5"&gt;&lt;i&gt;&lt;/i&gt;
  &lt;/span&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>