title: How to display radio buttons as <div>
body: <p>I want to display my radio buttons as  so that i can give style sheet and make <code>div</code> clickable.</p>
  
  <p>here are my radio buttons.</p>
  
  <p><a href="https://i.stack.imgur.com/PcizY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PcizY.png" alt="enter image description here"></a></p>
  
  <p>and I want to show them like this.</p>
  
  <p><strong>div as radio</strong></p>
  
  <p><a href="https://i.stack.imgur.com/fimzm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fimzm.png" alt="enter image description here"></a></p>
  
  <p>This is what I have tried but did not work.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="radio-toolbar"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="radio" id="radioone" name="product" value="first"&gt;
                  &lt;label for="radioone"&gt;50&lt;/label&gt;&lt;/td&gt;
  
              &lt;td&gt;&lt;input type="radio" id="radiotwo" name="product" value="second"&gt;
                  &lt;label for="radiotwo"&gt;100&lt;/label&gt;&lt;/td&gt;
  
              &lt;td&gt;&lt;input type="radio" id="radiothree" name="product" value="third"&gt;
                  &lt;label for="radiothree"&gt;500&lt;/label&gt;&lt;/td&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.radio-toolbar input[type='radio']:focus + label {
    border: 2px thin blue;
  }
  .radio-toolbar input[type='radio']:checked + label {
    background-color: #86b1f7;
    border-color: #4c4;
    color: white;
  }
  </code></pre>
  
  <p>So how can I achive this 
  Small help will be appreciated. 
  Thanks in advance :)</p>