单选按钮radio样式的改变

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36545656/article/details/54572510

很多时候,我们都会用到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 USA</label>
</p>
<p>
    <span class="circle-btn"></span>
    <input type="radio" value="2" name="country" class="radio">
    <label for="b" class="radio">European and</label>
</p>
<p>
    <span class="circle-btn"></span>
    <input type="radio" value="3" name="country" class="radio">
    <label for="c" class="radio">European USA</label>
</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










展开阅读全文

没有更多推荐了,返回首页