单选按钮radio样式的改变

很多时候，我们都会用到radio，但是又觉得它默认的样式不好看，所以就需要我们自己来进行修改；

1、首先写一个input;

 
<p>
    <span class="circle-btn">span>
    <input type="radio" value="1" name="country" class="radio" checked>
    <label for="a" class="radio">European and USAlabel>
p>
<p>
    <span class="circle-btn">span>
    <input type="radio" value="2" name="country" class="radio">
    <label for="b" class="radio">European andlabel>
p>
<p>
    <span class="circle-btn">span>
    <input type="radio" value="3" name="country" class="radio">
    <label for="c" class="radio">European USAlabel>
p>


这是它原本的样式。

2、下面进行改变；

css样式
 p{  position: relative;  }
        .circle-btn{
            display: inline-block;
            position: absolute;
            top:2px;
            border:1px solid rgb(192,192,192);
            border-radius: 50%;
            width: 16px;
            height: 16px;

        }
       input.radio[type='radio']{
            opacity:0;
            top:0;
           left: -4px;
            display:inline-block ;
            height: 18px;
            width: 18px;
            z-index: 100;
            vertical-align: middle;
            position:absolute;
        }

        input.radio[type='radio']:checked+.radio{
            background: url("img/xb2.png")0 -140px no-repeat ;
        }
         label.radio{
            font-size:14px;
            display: inline-block;
            /*background: url("img/little.png") -17px -383px no-repeat;*/
            height: 16px;
            padding-left: 30px;
            position: relative;
            vertical-align: middle;
            line-height: 16px;
        }


实际上就是把原来的input隐去，再自定义一个spa设置它宽高和背景色；

注意：在写span时一定要跟input位置对齐，不然会出现不能点击的情况；
。好了，这就是个完整的例子，大家可以试下。
下面是用到的雪碧图：xb2.png