修改手机端radio 样式

实现手机端radio样式修改

http://www.iconfont.cn/搜索对勾图片和圆圈图,分别命名为radio.png 和 select.png

填写自己要的颜色,点击下载png,一般人都会

   <span class="address-radio checked"></span>
    <input type="radio" name="address" class="hide">
    .address-radio {
            display: block;
            width: 2rem;
            height: 2rem;
            margin: 0 auto;
            background: url(../../assets/images/radio.png) no-repeat 0px 1px;
            background-size: 100% 100%
        }

        .address-radio.checked {
            background: url(../../assets/images/select.png) no-repeat 0px 1px;
            background-size: 100% 100%
        }
     .hide {
        display:hidden
        }
$(".address-radio").click(function () {
        $(".address-radio").removeClass("checked");
        $(this).toggleClass("checked");
        $(this).next().prop('checked', 'true');
    });

代码很简单

 

posted @ 2017-06-19 17:51  sunniejs  阅读(1019)  评论(0编辑  收藏  举报