CSS 实现 IOS checkbox

html

<div class="action-pop-layer-item">
    <div class="item-text">市界</div>
    <input type="checkbox" name="Storage" id="shijie"/>
    <label for="shijie"><em></em></label>
</div>

css

.action-pop-layer-item{
    height: 0.3rem; /* row height */ 
    line-height: 0.3rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    clear: both;
    margin-bottom: 0.05rem;
}


.action-pop-layer-item input {
    display: none
}
.action-pop-layer-item label {
    display: block;
    width: 0.34rem; /* check wrapper width */ 
    background: #CCC;
    height: 0.18rem; /* check wrapper height */ 
    border-radius: 0.14rem;
    margin: 0 0.2rem 0 0;
    box-shadow: 0 0.01rem 0.02rem rgba(0,0,0,.1) inset;


    cursor: pointer;
}
.action-pop-layer-item label em {
    width: 0.16rem; /* check dot width */ 
    height:  0.16rem; /* check dot height */
    float: left;
    margin: 0.01rem;
    border-radius: 0.13rem;
    box-shadow: 0.02rem 0.03rem 0.08rem rgba(0,0,0,.1);
    background: #FFF;
}
.action-pop-layer-item input:checked + label {
    background: #49c95b; /* inner color */
}
.action-pop-layer-item input:checked + label em {
    float: right;
    transition: all 1s;
}
.action-pop-layer-item input:disabled + label {
    opacity: 0.5
}


.action-pop-layer-item .item-text{
    color: #333;
    font-size: 0.14rem;
    text-indent: 0.25rem;
}