title: How Do I Make Li Clickable for Radio Button Inside
body: <p>Trying to create a fun form. This is what I have so far:</p>
  
  <p><a href="http://jsfiddle.net/zee9y3Lq/" rel="nofollow">>JSFiddle&lt;</a></p>
  
  <p><a href="http://jsbin.com/yaqinozeyo/1/edit?html,css,output" rel="nofollow">>JSBin&lt;</a></p>
  
  <p><a href="http://codepen.io/anon/pen/zxvMbg" rel="nofollow">>Codepen&lt;</a></p>
  
  <p>The html:</p>
  
  <pre><code>&lt;form&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;input type="radio" name="opinions" id="radio-1" /&gt;
              &lt;label for="radio-1"&gt;&lt;/label&gt;
              &lt;label for="radio-1"&gt;Latest&lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;input type="radio" name="opinions" id="radio-2" /&gt;
              &lt;label for="radio-2"&gt;&lt;/label&gt;
              &lt;label for="radio-2"&gt;Random&lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;input type="radio" name="opinions" id="radio-3" /&gt;
              &lt;label for="radio-3"&gt;&lt;/label&gt;
              &lt;label for="radio-3"&gt;Favorites&lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;input type="radio" name="opinions" id="radio-4" /&gt;
              &lt;label for="radio-4"&gt;&lt;/label&gt;
              &lt;label for="radio-4"&gt;Most Views&lt;/label&gt;
          &lt;/li&gt;
          &lt;ul&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>/*hide button &amp; text label*/
  input[type="radio"], input[type="radio"] + label + label {
      display: none;
  }
  
  /*Hide list bullets*/
  ul {
      list-style: none;
  }
  
  /*Push label text down so it's not on image*/
  input[type="radio"] + label + label {
      padding-top: 20px;
  }
  
  /*display text label on hover*/
  input[type="radio"]:hover + label + label, input[type="radio"] + label:hover + label,       input[type="radio"] + label + label:hover, ul li:hover {
      display: block;
      color: white;
      width: 90px;
  }
  
  ul li {
       display: block;
       float:left;
       height: 60px;
       width: 50px;
       text-align: center;
       border: 1px solid cyan;
       background: #555;
  }
  
  /*display picture that acts as radio button*/
   input#radio-1+label {
      background: url('http://s30.postimg.org/53vskoxfl/time_added.png') no-repeat;
      background-size: 30px 30px;
      padding-left: 30px;
      padding-bottom: 30px;
      vertical-align: top;
  }
  /*change image color on hover &amp; selected*/
   input#radio-1:checked+label, input#radio-1:hover+label {
      background: url('http://s30.postimg.org/4jgri0475/time_added_selected.png') no-repeat;
      background-size: 30px 30px;
      padding-left: 30px;
      padding-bottom: 30px;
      vertical-align: top;
  }
  input#radio-2+label {
      background: url('http://s30.postimg.org/ew3242xq9/random.png') no-repeat;
      background-size: 30px 30px;
      padding-left: 30px;
      padding-bottom: 30px;
      vertical-align: top;
  }
  input#radio-2:checked+label, input#radio-2:hover+label {
      background: url('http://s30.postimg.org/cu2kptzr5/random_selected.png') no-repeat;
      background-size: 30px 30px;
      padding-left: 30px;
      padding-bottom: 30px;
      vertical-align: top;
  }
  input#radio-3+label {
      background: url('http://s30.postimg.org/c1uutip8h/favorites.png') no-repeat;
      background-size: 30px 30px;
      padding-left: 30px;
      padding-bottom: 30px;
      vertical-align: top;
  }
  input#radio-3:checked+label, input#radio-3:hover+label {
      background: url('http://s30.postimg.org/uiubhgbi9/favorites_selected.png') no-repeat;
      background-size: 30px 30px;
      padding-left: 30px;
      padding-bottom: 30px;
      vertical-align: top;
  }
  input#radio-4+label {
      background: url('http://s30.postimg.org/on0du1w75/views.png') no-repeat;
      background-size: 30px 30px;
      padding-left: 30px;
      padding-bottom: 30px;
      vertical-align: top;
  }
  input#radio-4:checked+label, input#radio-4:hover+label {
      background: url('http://s30.postimg.org/3re3it001/views_selected.png') no-repeat;
      background-size: 30px 30px;
      padding-left: 30px;
      padding-bottom: 30px;
      vertical-align: top;
  }
  </code></pre>
  
  <p>So I'm pretty close to my goal. Which is to have the same style as the top menu links on <a href="http://alpha.wallhaven.cc/search?categories=110&amp;purity=100&amp;sorting=random&amp;order=desc" rel="nofollow">>wallhaven&lt;</a>. However, I want to make it into a radio option, where you can select one option. I also want to avoid using javascript if at all possible. </p>
  
  <p>Questions:</p>
  
  <ol>
  <li>The li isn't completely selectable/hoverable. How can I fix this. This is the main question.</li>
  <li>Also, I don't believe I have to use the list, but rather just use radio buttons. Couldn't figure out how to avoid this. Anyway to avoid using a list?</li>
  <li>Loading the images is really repetitive. Anyway to limit the repetition?</li>
  </ol>
  
  <p>Thanks everyone!</p>