checkbox 디자인 변경하는 방법

안녕하세요.

웹 작업을 하거나 하이브리드앱을 만들때 checkbox 또는 radio 버튼을 커스터마이징 해야하는 경우가 많습니다.

이때 간단하게 checkbox 디자인을 변경하는 방법에 대해서 알아봅니다.

체크박스 custom 디자인 순서

1. HTML을 사용하여 기본 체크박스 만들기
2. CSS를 사용하여 기본 체크박스 없애기
3. CSS를 사용하여 디자인한 체크박스 만들기

체크박스 만들기 HTML

<div class="checkbox-container">

<input type="checkbox" id="is-subscription">

<label for="is-subscription">구독신청</label>

</div>

체크박스 만들기 CSS

.checkbox-container {

position: relative;

}

// 기본 체크박스 없애기

.checkbox-container input[type="checkbox"] {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip:rect(0,0,0,0);

border: 0

}

// 웹의 경우 커서에 pointer 설정

.checkbox-container input[type="checkbox"] + label {

display: inline-block;

position: relative;

cusor: pointer;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

// 새로운 디자인의 체크박스 만들기

.checkbox-container input[type="checkbox"] + label:before {

content: ' ';

display: inline-block;

width: 18px;

height: 18px;

line-height: 18px;

margin: -2px 8px 0 0;

text-align: center;

vertical-align: middle;

background: #fafafa;

border: 1px solid #cacece;

border-radius: 3px;

box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);

}

.checkbox-container input[type="checkbox"] + label:active:before,

.checkbox-container input[type="checkbox"]:checked + label:active:before {
        box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

}

.checkbox-container input[type="checkbox"]:checked + label:before {

content: '\2713';

color: #314ca2;

text-shadow: 1px 1px white;

background: #f1f4ff;

border-color: #adb8c0;

box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);

}

모두 즐거운 코딩하세요~