Bilal Zafar Bilal Zafar - 4 months ago 16
CSS Question

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

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

Answer

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?