[웹 UI 개발] 폼 - 2 / 폼 커스텀 (체크 박스, 라디오 버튼)

[웹 UI 개발] 폼 - 2 / 폼 커스텀 (체크 박스, 라디오 버튼)
/category/%EA%B3%B5%EB%B6%80/%EC%9B%B9%20UI%20%EA%B0%9C%EB%B0%9C

2023. 3. 27. 14:39

체크 박스와 라디오 버튼을 커스텀하는 방법에 대해 알아본다.

체크 박스와 라디오 버튼의 디자인은 css로 세부적인 컨트롤이 거의 불가능하다. 따라서 기능을 남겨두고 이미지로 대체하는 방법을 많이 사용한다.

커스텀된 체크 박스, 라디오 버튼의 예시는 아래 링크에서 확인할 수 있다.

css만을 이용한 checkbox 커스텀

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>체크박스, 라디오버튼</title>
        <link rel="stylesheet" href="css/reset.css"> <!--http://meyerweb.com/eric/tools/css/reset/-->
        <link rel="stylesheet" href="css/checkbox, radiobox.css">
    </head>
    <body>
        <h1>체크 버튼</h1>
        <div class="check_form">
            <input type="checkbox" id="check1" name="" value="">
            <label for="check1">선택 1</label>
        </div>
        <div class="check_form">
            <input type="checkbox" id="check2" name="" value="">
            <label for="check2">선택 2</label>
        </div>
    </body>
</html>

body {
    padding: 50px;
}

h1 {
    margin: 50px 0 20px;
    font-size: 20px;
    font-weight: bold;
}

.check_form {
    margin-top: 20px;
}

.check_form input {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}

.check_form label {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 36px;
    height: 21px;
    border-radius: 10px;
    background-color: #666;
    color: transparent;
}

.check_form label::before {
    position: absolute;
    top: 1px;
    left: 1px;
    content: "";
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: #fff;
}

.check_form input:checked + label {
    background-color: lightblue;
}

.check_form input:checked + label::before {
    right: 1px;
    left: auto;
}

checkbox와 연결된 label과 label:before를 통해 커스텀을 하는 방법이다.

이를 위해 본래 checkbox의 디자인은 숨겨준다(.check_form input {...}).

label은 display를 inline-block으로 변경하고 회색 배경이 되도록 수정해준다. 그리고 원래 label의 텍스트인 "선택1"을 숨기기 위해 "color: transparent;", "overflow:hidden" 속성을 추가한다.

label:before 가상요소를 활용해서 회색 배경에 있는 버튼 모양을 만들어준다.

체크가 되었을 때 디자인을 변경하기 위해 :checked와 인접 형제 선택자를 활용한다.

check_form의 input이 체크되었을 때(.check_form input:checkd) 인접한 lable(+ label)의 색을 변경하고,

인접한 lable의 before 가상요소(+ label::before)의 위치를 변경한다.

이미지를 이용한 checkbox 커스텀

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>체크박스, 라디오버튼</title>
        <link rel="stylesheet" href="css/reset.css"> <!--http://meyerweb.com/eric/tools/css/reset/-->
        <link rel="stylesheet" href="css/checkbox, radiobox.css">
    </head>
    <body>
        <h1>체크 버튼(img)</h1>
        <div class="check_form2">
            <input type="checkbox" id="checkimg1" name="" value="">
            <label for="checkimg1">선택 1</label>
        </div>
        <div class="check_form2">
            <input type="checkbox" id="checkimg2" name="" value="">
            <label for="checkimg2">선택 2</label>
        </div>
    </body>
</html>

body {
    padding: 50px;
}

h1 {
    margin: 50px 0 20px;
    font-size: 20px;
    font-weight: bold;
}

.check_form2 {
    margin-top: 20px;
}

.check_form2 input {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}

.check_form2 label:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: -1px 5px 0 0;
    background: url(../img/checkbox.png) no-repeat 0 0;
    background-size: 20px;
    vertical-align: top;
    content: "";
}

.check_form2 input:checked + label::before {
    background-image: url(../img/checkbox_on.png);
}

본래 checkbox 디자인을 숨기는 방식은 css만으로 checkbox를 커스텀할 때와 같다.

이번에도 checkbox와 연결되어 있는 label과 label::before를 활용한다.

label:before의 display를 inline-block으로 변경하고 background 속성을 사용해서 미리 준비한 이미지가 label의 앞에 오도록 한다.

체크가 되었을 때에는 background-image 속성을 사용해서 이미지만 변경해주면 된다.

이미지를 이용한 radio 버튼 커스텀

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>체크박스, 라디오버튼</title>
        <link rel="stylesheet" href="css/reset.css"> <!--http://meyerweb.com/eric/tools/css/reset/-->
        <link rel="stylesheet" href="css/checkbox, radiobox.css">
    </head>
    <body>
        <h1>라디오 버튼</h1>
        <div class="radio_form">
            <input type="radio" id="radio1" name="radio_form" value="">
            <label for="radio1">선택 1</label>
        </div>
        <div class="radio_form">
            <input type="radio" id="radio2" name="radio_form" value="">
            <label for="radio2">선택 2</label>
        </div>
        <div class="radio_form">
            <input type="radio" id="radio3" name="radio_form" value="">
            <label for="radio3">선택 3</label>
        </div>
    </body>
</html>

body {
    padding: 50px;
}

h1 {
    margin: 50px 0 20px;
    font-size: 20px;
    font-weight: bold;
}

.radio_form {
    margin-top: 20px;
}

.radio_form input {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}

.radio_form label:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: -1px 5px 0 0;
    background: url(../img/radio.png) no-repeat 0 0;
    background-size: 20px;
    vertical-align: top;
    content: "";
}

.radio_form input:checked + label::before {
    background-image: url(../img/radio_on.png);
}

본래 radio 버튼의 디자인을 초기화하는 방법은 위 예시들과 같다.

radio 버튼을 이미지로 대체하는 방법은 checkbox를 이미지로 커스텀하는 방법과 완전히 동일하다.

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

웹 UI 개발

부스트코스 무료 강의

www.boostcourse.org

'공부 > 웹 UI 개발' 카테고리의 다른 글

[웹 UI 개발] 폼 - 4 / 폼 커스텀 (셀렉트 메뉴) (0)	2023.03.29
[웹 UI 개발] 폼 - 3 / 폼 커스텀 (파일 찾기 버튼) (0)	2023.03.29
[웹 UI 개발] 폼 - 1 / 폼 커스텀 (텍스트 박스) (0)	2023.03.27
[웹 UI 개발] 폼 - 0 (0)	2023.03.27
[웹 UI 개발] 팝업 - 2 / 레이어 팝업 중앙 정렬 (0)	2023.03.27

김철용 기록소

CATEGORIES