[CSS] custom checkbox 만들기

checkbox를 css로 커스텀하기는 너무나 어렵다.

인터넷에서 열심히 찾아서 알아낸 방법. 잊지 않기 위해 적는다.

 <div className="checkboxWrapper">
  <input
    type="checkbox"
    name="전체"
    value="전체"
    id="all"
    className={styles.all}
  />
  <label htmlFor="all" className={styles.option}>
    <span className={styles.checkmark} />
    All
  </label>
</div>


/*CSS*/
.all {
  position: absolute;
  opacity: 0;
}

.all:checked ~ .option > .checkmark {
  border-width: 1px;
  background-color: red;
}

.all:checked ~ .option > .checkmark:after {
  display: block;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid red;
  border-radius: 5px;
  margin-right: 10px;
}

.option {
  padding-left: 30px;
}

.option > .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.option:hover > .checkmark {
  border: 2px solid green;
}

 

 

그런데.. Checkbox 안에 이모티콘을 쓸 수는 없을까? content에 unicode를 넣는 건 왜 안될까? 🤨