css 能改变input type radio和checkbox 圆圈或方框的大小

佚名 6年前 (2019-04-25) 随笔 1954人围观抢沙发百度已收录

把input隐藏，外面套label，再里面加个span，样式写在span上，让label覆盖在span上面，js去改active的class

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<label for="remember" class="text-muted"><span class="circle-btn"></span><input type="radio" id="remember" style="display:none;" />记住密码</label>

label {
    -webkit-user-select: none;
}
.circle-btn {
    width: 14px;
    height: 14px;
    border-radius: 100%;
    border: 1px solid #808080;
    transition: all 0.4s;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline-block;
    vertical-align: middle;
    margin: -4px 3px 0 0;
}
.circle-btn.active {
    border-width: 5px;
    border-color: #1dace8;
}