html部分

 

　　

 

　　<divclass="radio">

 

　　<label>

 

　　<inputname="feel"type="radio"value="love"/>

 

　　<spanclass="pos">

 

　　<spanclass="radio_bg">

 

　　<spanclass="radio_on"></span>

 

　　</span>

 

　　</span>

 

　　<span>LOVE</span>

 

　　</label>

 

　　<label>

 

　　<inputname="feel"type="radio"value="hate"/>

 

　　<spanclass="pos">

 

　　<spanclass="radio_bg">

 

　　<spanclass="radio_on"></span>

 

　　</span>

 

　　</span>

 

　　<span>YOUARENICE</span>

 

　　</label>

 

　　</div>

 

　　css样式部分

 

　　

 

　　

 

　　.radio{

 

　　width:260px;

 

　　height:26px;

 

　　line-height:26px;

 

　　margin:200pxauto;

 

　　background-color:#ddeef1;

 

　　font-size:16px;

 

　　color:#495060;

 

　　text-align:center;

 

　　}

 

　　label:first-child{

 

　　margin-right:40px;

 

　　}

 

　　labelinput,.radio_on{

 

　　display:none;

 

　　}

 

　　.pos{

 

　　display:inline;

 

　　vertical-align:middle;

 

　　}

 

　　.radio_bg{

 

　　position:relative;

 

　　display:inline-block;

 

　　height:14px;

 

　　width:14px;

 

　　border:1pxsolid#B3B4B8;

 

　　border-radius:50%;

 

　　}

 

　　label:hover.radio_bg,labelinput:checked+span.posspan.radio_bg{

 

　　border:1pxsolid#27B28B;

 

　　}

 

　　labelinput:checked+span.posspan.radio_bg.radio_on{

 

　　display:inline-block;

 

　　position:absolute;

 

　　top:2px;

 

　　left:2px;

 

　　width:10px;

 

　　height:10px;

 

　　border-radius:50%;

 

　　background-color:#27B28B;

 

　　}





本文转载自中文网