custom checkbox #2 커스텀 라디오 버튼, 체크박스 (폰트어썸 아이콘)

 

- radio 버튼

동일한 name값을 가져야 다중 선택이 가능함

 

- custom radio button : 배경이미지 이용 ( background: url(img/....jpg) )

백그라운드이미지를 왼쪽 오른쪽으로 이동시킴

    <div class="grade">
        <h2>Custom Radio</h2>
        <input type="radio" name="grade" id="grade-chk1"> 
        <label for="grade-chk1"><em></em>초등학생</label> 
        <input type="radio" name="grade" id="grade-chk2"> 
        <label for="grade-chk2"><em></em>중학생</label>  
        <input type="radio" name="grade" id="grade-chk3"> 
        <label for="grade-chk3"><em></em>고등학생</label>  
        <input type="radio" name="grade" id="grade-chk4"> 
        <label for="grade-chk4"><em></em>대학생</label>     
    </div>

.grade input[name=grade] {
    display: none;
}
.grade label {
    cursor: pointer;
}
.grade label em {
    /* border: 1px solid red; */
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
    background: url(../img/check/radio-01.png) no-repeat left center;
}
.grade input[type=radio]:checked + label em {
    background-position: right center;
}
.grade input[type=radio]:checked + label {
    color: #f156b6;
}

    <form action="">
        <input type="checkbox" id="chk1" checked>
        <label for="chk1">HTML</label>
        <input type="checkbox" id="chk2">
        <label for="chk2">CSS</label>
        <input type="checkbox" id="chk3">
        <label for="chk3">jQuery</label>
        <input type="checkbox" id="chk4">
        <label for="chk4">UIKit</label>
    </form>