[CSS] 가상요소로 체크박스 커스텀하기 (::after, ::before)

todo list를 만들면서 기본 체크박스 디자인이 아닌 실제로 체크한듯한 느낌을 주고싶어서 체크박스 스타일에대해 찾아보았다.

체크박스의 스타일을 변경하는 것으론 한계가 있어서 대부분 체크박스와 연결된 label에 요소를 추가한다고 한다.

 

 

간단 요약

1) 체크박스를 보이지 않게 숨긴다.

2) label 혹은 태그 내 다른 요소를 체크되지 않은 상태의 체크박스로 꾸며준다.

3) 체크된 상태도 꾸며준다. 이 때 예시처럼 다른 기호, 이미지 등을 띄우고싶다면 가상요소를 활용한다.

 

 

만들어보자

HTML 구조

<input type="checkbox" name="task" id="task${taskList.children.length + 1}">
<label for="task${taskList.children.length + 1}">
<span class="checkboxIcon"></span>  /* 이 span을 체크박스로 만들 것이다! */
<span class="taskContent">${newTask}</span>
</label>

 

 

체크박스 숨기기

input[type="checkbox"] {
  display: none;
}

 

 

체크박스 기본 상태 만들기

.checkboxIcon {
  margin-right: 10px;
  width: 15px;
  height: 15px;
  background-color: transparent;
  border: 1px solid black;

  position: relative;
}

 

15px * 15px의 검은 테두리 투명한 박스를 만들었다.

옆의 텍스트(할 일)와 간격을 두기위해 magrin-right를 설정하였고 후에 추가할 가상요소 위치 설정을 위해 position: relative를 설정했다.

 

input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

 

label 내 요소들의 정렬을 위해 flex를 사용했다.

 

 

체크된 상태 만들기

input[type="checkbox"]:checked + label .checkboxIcon::after {
    content: "✔";
    text-align: center;
    font-size: 1.5rem;

    position: absolute;
    top: -125%;
}

 

체크박스가 체크된 상태일 때 가상요소를 생성하여 체크 기호를 넣어주고 크기와 위치를 지정해주었다.

::after는 요소에 장식용 콘텐츠를 추가할 때 주로 사용되는 가상 요소다.

만약 지금처럼 별도의 기호, 이미지 등을 사용하지 않는다면 가상요소 없이 스타일을 지정해주면 된다. (ex. background-color만 변경하는 경우)

 

이렇게하면 커스텀 체크박스 완성!

가상요소에 대한 이해가 부족해서 위치 정렬과 기호를 보이게하는 것에 조금 애를 먹었다.

 

 

가상요소란?

CSS에서 선택한 요소의 일부에 스타일을 입힐 수 있도록 한다.

사용한 ::after 외에도 ::first-line 등이 있으며, ::first-line을 사용하는 경우 문단 첫 줄에만 별도의 스타일을 적용할 수 있다.

 

::after

선택한 요소의 마지막 자식으로 가상 요소를 생성한다.

보통 요소에 장식용 콘텐츠를 추가하기 위해 사용하며, content 속성을 활용해 텍스트, 이미지 등을 추가할 수 있다.

/* 이미지 사용하는 경우 */
someElement::after {
	content: url("imagePath");
}