Docs Input checkbox

Css

input[role=switch]:checked {
	background-color: var(--bg-checked, var(--bg, rgb(60,130,250)));
}

Html

<label>
  <input type="checkbox">Bow
</label>

Contoh :

Bow

Css

label input[role=switch]{
  -webkit-appearance: none;
  appearance: none;
  width: 35px;
  height: 20px;
  background-color: #ddd;
  border-radius: 25px;
  transition: background .6s;
  cursor: pointer;
  box-sizing: content-box;
  position: relative;
  user-select: none;
  outline: none;
}

label input[role=switch]::after{
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  transition: left .3s;
}

label input[role=switch]{
  background-color: var(--bg-after, var(--bg, rgb(60,130,250)));
}

label input[role=switch]::after{
  background-color: var(--bg-after, var(--bg, rgb(60,130,250)));
}

/* Warna latar belakang checked */
lebel input[role=switch]:checked {
	background-color: var(--bg-checked, var(--bg, rgb(60,130,250)));
}
  
/* Change position on checked */
label input[role=switch]:checked::after{
  left: 70%;
  background: #ddd;
}

label input[role=switch]:checked::before {
	transform: translate(120%, 20%);
}

label input[role=switch]:indeterminate::before {
	transform: translate(70%, 20%);
	content: '-';
}

label input[role=switch]:disabled:before {
	opacity: 0.4;
}

Contoh :

Bow Bow

Buat atau tambahkan atribut role="switch" di dalam tag <input> untuk melihat hasil dari kode Css di atas.

Html

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

Mengatur Warna

style="--bg-checked: color;" gunakan ini untuk membuat warna pilihan

Contoh :

Bow Bow

Uji link

Html

<label>
  <input type="checkbox" role="switch" style="--bg-checked: violet;">Bow
</label>
<label>
  <input type="checkbox" role="switch" style="--bg-checked: violet;" checked>Bow
</label>

States:

Disabled Disabled + Checked Indeterminate

Html

<label>
  <input type="checkbox">Bow
</label>

Contoh :

Bow

Html

<label>
<input type="checkbox" role="switch" disabled>
		Disabled</label>
	<label>
    <input type="checkbox" role="switch" disabled checked>
		Disabled + Checked
	</label>

Html

<label>
  <input type="checkbox" role="switch" indeterminate>Indeterminate
<script>document.currentScript.previousElementSibling.indeterminate=true</script>
</label>

• disabled adalah mengunci
• checked berarti menjadi aktif
• indeterminate Yang artinya tidak pasti atau belum jelas