title: Star rating by Rogie
body: <p>I decided to use those very nice rating stars which I found on this page:
  <a href="http://rog.ie/blog/css-star-rater" rel="nofollow">http://rog.ie/blog/css-star-rater</a></p>
  
  <p>html</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.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;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;}
  
  .star-rating i {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 20%;
      z-index: 1;
      background:  url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;}
  
  .star-rating 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;
  }
  
  .star-rating input:hover + i,
  .star-rating input:checked + i {
      opacity: 1;
  }
  .star-rating i ~ i {
      width: 40%;
  }
  .star-rating i ~ i ~ i {
      width: 60%;
  }
  .star-rating i ~ i ~ i ~ i {
      width: 80%;
  }
  .star-rating i ~ i ~ i ~ i ~ i {
      width: 100%;
  }
  
  .choice {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 20px;
      display: block;
  }
  </code></pre>
  
  <p>Author uses JS to run it but I would like to use it without JS. My idea was to put it into a form but a problem is that it always sends a value of 1. Does anyone know how I could remake it so it would actually work like a proper input form? I do believe that the problem is CSS which prevents from choosing another value than 1. Thank you for any feedback.</p>