체크박스 예시 소스 코드

HMTL & CSS

체크박스 예시 소스 코드

동띠기 2020. 9. 1. 16:46

728x90

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../reset.css">
    <title>Document</title>
</head>
<body>
    <!-- 움직이는 ON/OFF 버튼 -->
    <div class="check_wrap">
        <h1>체크 박스</h1>
        <div class="check_form">
            <input type="checkbox" id="check1" name="" value="">
            <label for="check1"></label>
        </div>

        <div class="check_form">
            <input type="checkbox" id="check2" name="" value="">
            <label for="check2"></label>
        </div>
    </div>
    <!-- 이미지로 체크박스 변경 -->
    <div class="check_wrap">
        <h1>이미지 체크 박스</h1>
        <div class="check_form2">
            <input type="checkbox" id="checkimg1" name="" value="">
            <label for="checkimg1">체크박스</label>
        </div>

        <div class="check_form2">
            <input type="checkbox" id="checkimg2" name="" value="">
            <label for="checkimg2">체크박스</label>
        </div>
    </div>

    <!-- 이미지로 라디오버튼 변경 -->
    <div class="check_wrap">
        <h1>라디오 체크 박스</h1>
        <div class="radio_form">
            <input type="radio" id="radioimg1" name="radio_form" value="">
            <label for="radioimg1">선택1</label>
        </div>

        <div class="radio_form">
            <input type="radio" id="radioimg2" name="radio_form" value="">
            <label for="radioimg2">선택2</label>
        </div>

        <div class="radio_form">
            <input type="radio" id="radioimg3" name="radio_form" value="">
            <label for="radioimg3">선택3</label>
        </div>
    </div>
</body>
</html>

css

@charset "utf-8";
/* 움직이는 ON/OFF 버튼  */
.check_wrap{
    margin: 100px;
}
.check_form,
.check_form2,
.radio_form{
    margin: 20px;
}
.check_form input,
.check_form2 input,
.radio_form input{
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}
.check_form label::before{
    content: '';
    display: block;
    position: absolute;
    height: 19px;
    width: 19px;
    border-radius: 50%;
    background-color: #fff;
    top: 1px;
    left: 1px;
}
.check_form label{
    position: relative;
    width: 36px;
    height: 21px;
    background: #666;
    border-radius: 10px;
    overflow: hidden;
    color: transparent;
    display: inline-block;
}
.check_form input:checked + label{
    background-color: limegreen;
}
.check_form input:checked + label::before{
    left: auto;
    right: 1px;
}

/* 이미지로 체크박스 변경 */
.check_form2 label::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: -4px 5px 0 0;
    background: url("checkbox.png") no-repeat 0 0;
    background-size: 20px;
}
.check_form2 input:checked + label::before{
    background-image: url("checkbox_on.png");
}

/* 이미지로 라디오 변경 */
.radio_form label::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: -4px 5px 0 0;
    background: url("radio.png") no-repeat 0 0;
    background-size: 20px;
}
.radio_form input:checked + label::before{
    background-image: url("radio_on.png");
}

728x90