单选框和多选框样式

效果图

当点击选择区域后中间的会以蓝色向周围扩散并且充满选择块，当选择其他选项时上一个被选择区域背景色缩放至中间并且消失

1
2 3

css部分

:after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。

:before 选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容。

：checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

translate(x,y)在x轴y轴的移动距离，如果为负值则为负方向移动

scale3d(x,y,z)放大或缩放 x，y，z代表在x轴，y轴，z轴放大多少倍

        .selectRole{width:500px;margin: 0 auto;position: relative;overflow: hidden;margin-top: 10px;}
        .selectRole label{width:100%;padding: 20px 30px;background: #e5e5e5;display: block;box-sizing: border-box;position: relative;z-index: 98;}
        .selectRole input{position: absolute;width:26px;height:26px;right: 0;top: 50%;margin-top: -13px;z-index:99;}
        .selectRole label:after{position: absolute;content: "";width:6px;height: 6px;border-radius:50%;display: block;top:50%;left: 50%;margin-top: -3px;margin-left: -3px;transition: all .3s;}
        .selectRole input:checked ~label{color: #fff;}
        .selectRole input:checked ~label:after{background: #2a69c7;transform:translate(50%, 50%) scale3d(85,85,1);position: absolute;z-index: -99;}
        .selectRole label:before{width: 26px;height: 26px;content: "";background: url(images/duigou.png)no-repeat;position: absolute;top:50%;right:0;margin-top: -13px;margin-right: 3px;border-radius: 50%;}
        .selectRole input:checked {z-index: 0}

HTML部分
1、input中的id的值要和label中的for的值相同，否则点击字体时input不会被选中。
2、单选按钮中的name要相同，否则点击一个其他的单选框还是在选定状态。

<form class="form">
<div class="selectRole">
    <input id="myradio1" type="checkbox"/>
    <label for="myradio1">
        多选
    </label>
</div>
<div class="selectRole">
    <input id="myradio2" type="checkbox"/>
    <label for="myradio2">
        多选
    </label>
</div>
<div class="selectRole">
    <input id="myradio3" name="radio" type="radio"/>
    <label for="myradio3">
        单选
    </label>
</div>
<div class="selectRole">
    <input id="myradio4" name="radio" type="radio"/>
    <label for="myradio4">
        单选
    </label>
</div>
</form>