[css] on/off 토글 스위치 간단히 만들기

 

 

ON/OFF 토글

 

1. HTML

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

 

2. CSS

/*  on/off토글  */
label {
    display: block;
    position: relative;
    width: 100px;
    height: 45px;
    background: #d3d3d3;
    border-radius: 60px;
    transition: background 0.4s;
  }
  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;
  }
  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;
  }
   /* 스위치(체크박스)가 토글(체크)되었을 때 */
  #switch:checked + label {
    background:rgba(109, 104, 107)
  }
  #switch:checked + label::after {
    left: calc(100% - 42.5px);
   }
  #switch:checked + label::before {
    content: "ON";
    color: #fff;
    left: 15px;
  }
  [type="checkbox"] {
    appearance: none;
}

 

 

---

 

 

 

1. HTML

<label>
    <input role="switch" type="checkbox" />
</label>

 

: 라벨 안에 텍스트 요소를 넣어 텍스트 클릭시에도 토글되도록 설정할 수 있다.

 

2. CSS

 

label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

[type="checkbox"] {
    appearance: none;
    position: relative;
    border: max(2px, 0.1em) solid gray;
    border-radius: 2em;
    width: 5.25em;
    height: 2.1em;
}

[type="checkbox"]::before {
    content: "";
    position: absolute;
    left: 0;
    width: 2em;
    height: 1.8em;
    border-radius: 50%;
    transform: scale(0.8);
    background-color: gray;
    transition: left 250ms linear;
}

[type="checkbox"]:checked::before {
    background-color: white;
    left: 3em;
}
  
[type="checkbox"]:checked {
    background-color: tomato;
    border-color: tomato;
}

[type="checkbox"]:enabled:hover {
    box-shadow: 0 0 0 max(4px, 0.2em) #61616124;
}