[CSS] Checkbox(체크박스) 커스텀, 스타일 변경하기

 

 

 

체크박스 스타일을 커스텀하는 방법입니다.

 

커스텀	이용약관에 동의합니다.
브라우저 기본	이용약관에 동의합니다.

 

 

 

 

1. HTML

 

<label for="agree" class="chk_box">
	<input type="checkbox" id="agree" checked="checked" />
	<span class="on"></span>
	이용약관에 동의합니다.
</label>

 

 

 

2. CSS

 

.chk_box { display: block; position: relative; padding-left: 25px; margin-bottom: 10px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* 기본 체크박스 숨기기 */
.chk_box input[type="checkbox"] { display: none; }

/* 선택되지 않은 체크박스 스타일 꾸미기 */
.on { width: 20px; height: 20px; background: #ddd; position: absolute; top: 0; left: 0; }

/* 선택된 체크박스 스타일 꾸미기 */
.chk_box input[type="checkbox"]:checked + .on { background: #f86480; }
.on:after { content: ""; position: absolute; display: none; }
.chk_box input[type="checkbox"]:checked + .on:after { display: block; }
.on:after { width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 2px; }