css-demo 시리즈의 checkbox 구현

css-demo-checkbox 5/14/2016 9:31:13 AM

<div class="wrap">
    <label>  ：</label>

    <div class="cb-wrap">   <!--      checkbox， div   -->
        <input type="radio" name="sex1" value=" "></input>   <!--     ，      -->
        <span class="cb-icon"></span>   <!--     ，  checkbox   -->
        <span class="cb-label"> </span>     <!--     ，         -->
    </div>

    <div class="cb-wrap">
        <input type="radio" name="sex1" value=" "></input>
        <span class="cb-icon"></span>
        <span class="cb-label"> </span>
    </div>

</div>

css 구현:

.wrap {
    label {
        display: inline-block;
        width: 50px;
        text-align: right;
        margin-right: 15px;
    }
}

.cb-wrap {
    display: inline-block;  //  div         ，           ，       

    width: 50px;
    height: 30px;
    margin-right: 15px;
    line-height: 30px;

    position: relative; //     

    input {
        opacity: 0; //       0
        width: 100%; //        checkbox（.cb-wrap）   
        height: 100%;
        z-index: 2; //      
        position: absolute; //    .cb-wrap  
        top: 0;
        left: 0;
    }

    //    :checked，  checkbox             
    input:checked + span {  //  “       ”，    checkbox   
        background: red;
    }

    input:checked ~ .cb-label { //  “         ”，       
        color: red;
    }

    .cb-icon {  //     checkbox
        display: inline-block;  // span  ，          ！
        width: 16px;
        height: 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
        position: relative; //             ，       
        top: 3px;

        &:after {   //        （√）  
            content: "";
            display: inline-block;
            width: 9px;
            height: 6px;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            transform: rotate(-45deg);
            position: absolute;
            top: 3px;
            right: 3px;
        }
    }
}

(예제2는 실례1에 비해 간단하고 원소로 시뮬레이션을 할 필요가 없는 체크박스이며 span 원소도 하나 없어졌다. 차이점은 cb-icon의 실현이 다르다는 것이다)

<div class="wrap">
    <label>  ：</label>

    <div class="cb-wrap">
        <input type="radio" name="sex2" value=" "></input>
        <span class="cb-icon"> </span>
    </div>

    <div class="cb-wrap">
        <input type="radio" name="sex2" value=" "></input>
        <span class="cb-icon"> </span>
    </div>

</div>

css 구현:

.cb-wrap {
    display: inline-block;

    width: 50px;
    height: 30px;
    margin-right: 15px;
    line-height: 30px;
    position: relative;

    input {
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
    }

    input:checked + span {
        background: orange;
        color: #fff;
    }

    .cb-icon {
        display: inline-block;
        width: 50px;
        height: 25px;
        border: 1px solid #ddd;
        text-align: center;
        line-height: 25px;
    }
}