<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <label class="container">체크박스
    <input type="checkbox">
    <span class="checkmark"></span>
  </label>
</body>
</html>
.container {
  position: relative;
  padding-left: 25px; /* 체크박스가 들어갈 공간 확보 */
}

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

/* 체크되기 전 스타일 */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  border: 2px solid cornflowerblue;
  border-radius: 4px;
}

/* hover된 상태 */
.container:hover .checkmark {
  background-color: #eee;
}

/* 체크된 상태 (박스) */
.container input:checked ~ .checkmark {
  background-color: cornflowerblue;
}

/* 체크마크 생성. 체크되지 않은 상태에서는 숨겨짐 */
.checkmark:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  display: none;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* 체크되면 display속성을 변경해서 표시 */
.container input:checked ~ .checkmark:after {
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.