title: adjust label position in image type radio button
body: <p>I am creating radio buttons but i am facing to adjust the label position. Please helo me to solve this.
  my code is:</p>
  <pre><code>&lt;style&gt;
  input[type=radio]:not(old){
  width   : 50px;
   margin  : 0;
   padding : 0;
   opacity : 0;
  }
  
  
  input[type=radio]:not(old) + label{
   display      : inline-block;
  padding-left : 63px;
  background   : url('radio.png') no-repeat 0 0;
  line-height  : 25px;
  
  }
  
  input[type=radio]:not(old):checked + label{
    background-position : 0 -24px;
  }
  </code></pre>
  <p>html:</p>
  <pre><code>&lt;input id=&quot;radio1&quot; type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;1&quot; onclick=&quot;javascript:yesnoCheck();&quot; checked=&quot;checked&quot;&gt;&lt;label for=&quot;radio1&quot;&gt;Now &lt;/label&gt;
  
   
      &lt;input id=&quot;radio2&quot; type=&quot;radio&quot; name=&quot;radio&quot; onclick=&quot;javascript:yesnoCheck();&quot;  value=&quot;2&quot;&gt;&lt;label for=&quot;radio2&quot;&gt;Later&lt;/label&gt;
  </code></pre>
  <p>Please have a look at image, i need to move labels to the left side</p>
  <p><a href="https://i.stack.imgur.com/RZaUS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RZaUS.png" alt="Please have a look at image, i need to move labels to the left side" /></a></p>