css - 调整图像类型单选按钮中的标签位置

Question

我正在创建单选按钮，但我要调整标签位置。请帮我解决这个问题。 我的代码是:

<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>

请看图片，我需要将标签移到左侧

Answer 1

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;
}

这有帮助吗？