Q: adjust label position in image type radio button I am creating radio buttons but i am facing to adjust the label position. Please helo me to solve this.
my code is:
<style>
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;
}

html:
<input id="radio1" type="radio" name="radio" value="1" onclick="javascript:yesnoCheck();" checked="checked"><label for="radio1">Now </label>

 
    <input id="radio2" type="radio" name="radio" onclick="javascript:yesnoCheck();"  value="2"><label for="radio2">Later</label>

Please have a look at image, i need to move labels to the left side


A: HTML:
<input id="radio1" type="radio" name="radio" value="1" onclick="javascript:yesnoCheck();" checked="checked"><label for="radio1">Now </label>


    <input id="radio2" type="radio" name="radio" onclick="javascript:yesnoCheck();"  value="2"><label for="radio2">Later</label>

CSS:
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;
line-height  : 25px;
  position: relative;
}

input[type=radio]:not(old) + label:after{
  content: '';
  position: absolute;
  top: 0;
  left: 23px;
  width: 100%;
  height: 100%;
  z-index: -1;
  background   : url('radio.png') no-repeat 0 0;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -24px;
}

Is this helping?
