/* 기본 체크박스를 숨긴다 */
input[type=checkbox] {
  display:none;
}

/* 체크되지 않은 상태 */
input[type=checkbox] + label:before{
  content:"";
  display:inline-block; /* 박스가 줄바꿈되지 않고 생성되도록 한다*/
  width:17px;
  height:17px;
  border:2px solid cornflowerblue;  /* 체크박스 외곽선 */
  border-radius: 4px;
  vertical-align: top;  /* 박스와 라벨의 수직 정렬 */
}


/* hover된 상태 */
input[type=checkbox]:hover + label:before {
  background-color: #eee;
}


/* 체크된 상태 */
input[type=checkbox]:checked + label:before{
  /* 체크 이모지를 활용한다. 환경에 따라 표시되는 모양이 다를 것이다.. */
  content:"✔";
  /* 
  환경에 상관없이 같은 모양을 보여주고 싶다면 이미지를 사용하자
  content: "";
  background-image: url('체크이미지 경로');
  background-repeat: no-repeat;
  background-position: 50%;
  */
  font-size: 15px;
  text-align: center;
  line-height: 17px;  /* 체크 이모지가 박스 중간에 오도록 줄 높이를 박스 크기에 맞춘다*/
  color: white; /* 체크 색상 */
  background-color:cornflowerblue;
  border-color:cornflowerblue;
  background-repeat: no-repeat;
  background-position: 50%;
}