HTML Switch Control Sample

GitHub (burnworks/ html-switch-control-sample)

2024年3月7日現在、<input type="checkbox" switch> をサポートしているのは Safari 17.4 のみです。

Traditional

switch 属性に対応していない環境向けの実装例

ソースコード

HTML 
<label>
  <span class="traditional">
    <input type="checkbox" checked>
  </span>
  Toggle switch
</label>
CSS 
.traditional {
  position: relative;
  display: inline-flex;
  height: 2rem;
  width: 3.5rem;
  align-items: center;
  border-radius: 9999px;
}

.traditional:focus-within {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #2563eb;
}

.traditional input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.traditional:has(input[type="checkbox"]) {
  --bg-opacity: 1;
  background-color: rgb(152 152 157 / var(--bg-opacity));
}

.traditional:has(input[type="checkbox"]:checked) {
  --bg-opacity: 1;
  background-color: rgb(52 199 89 / var(--bg-opacity));
}

.traditional::before {
  content: "";
  position: absolute;
  left: .25rem;
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 9999px;
  --bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--bg-opacity));
  --shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  box-shadow: var(--shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .3s;
}

.traditional:has(input[type="checkbox"]:checked)::before {
  --translate-x: 1.25rem;
  transform: translate(var(--translate-x), 0);
}

Basic

switch 属性を使用した最も基本的な実装例

ソースコード

HTML 
<label>
  <input type="checkbox" switch checked>
  Toggle switch
</label>

with CSS accent-color

CSS accent-color を指定した実装例

ソースコード

HTML 
<label>
  <input type="checkbox" switch checked>
  Toggle switch
</label>
CSS 
input[type="checkbox"][switch] {
  accent-color: #dc2626;
}