CSS

체크박스를 이용해 토글 스위치(ON/OFF)만들기

고수남 2022. 12. 23. 10:44

기본 개념은,

체크박스를 레이블로 감싸주고 레이블로 스위치 배경을, 가상요소로 토글 버튼과 글씨의 모양을 잡아줍니다.

CSS속성은 크게 6가지를 사용합니다.

 

 

 

<HTML>

<body>
  <input type="checkbox" id="chk1"/><label for="switch"></label>
</body>

HTML작성은 간단합니다.

 

 

 

<CSS> // 스위치의 배경

label {
  display: block;
  position: relative;
  width: 100px;
  height: 45px;
  background: #d3d3d3;
  border-radius: 60px;
  transition: background 0.4s;
}

레이블 요소를 이용하여 스위치의 전체적인 틀을 잡아줍니다.

 

 

 

<CSS> // 레이블 가상요소(스위치의 버튼)

label::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #fff;
  transform: translateY(-50%);
  box-shadow: 1px 3px 4px rgba(0,0,0,0.1);
  transition: all 0.4s;
}

"::after"속성을 활용하여 가상요소를 생성합니다.

이 가상요소를 스위치의 버튼으로 활용합니다.

 

 

 

<CSS> // 레이블 가상요소(스위치의 ON, OFF글씨)

label::before {
  content: "OFF";
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  left: 45px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s;
}

"::before"속성을 활용하여 가상요소를 생성합니다.

이 가상요소를 스위치 내부의 ON, OFF글씨를 표현합니다.

기본 상태(체크되지 않았을 때)는 OFF입니다.

 

 

 

<CSS> // 스위치(체크박스)가 토글(체크)되었을 때 배경

#chk1:checked + label {
  background:rgba(109, 104, 107)
}

":checked"속성을 사용하여 체크박스가 체크 되었을 때의 색상을 넣어줍니다.

 

 

 

<CSS> // 스위치(체크박스)가 토글(체크)되었을 때 버튼

#chk1:checked + label::after {
 left: calc(100% - 42.5px);
}

":checked"속성을 사용하여 체크박스가 체크 되었을 때의 버튼의 위치를 조정합니다.

 

 

 

<CSS> // 스위치(체크박스)가 토글(체크)되었을 때 글씨(ON/OFF)

#chk1:checked + label::before {
  content: "ON";
  color: #fff;
  left: 15px;
}

":checked"속성을 사용하여 체크박스가 체크 되었을 때 OFF글씨를 ON으로 변경해줍니다.

 

 

 

 

**Reference

https://www.youtube.com/watch?v=KVUy9i26kiI