Customize Toggle Switches with Pure CSS — 13 Copy‑Paste Checkbox UI Designs

Japanese

13 Copy‑Paste Toggle Switch Designs Using Only CSS and a Checkbox

This page introduces how to customize a checkbox into a toggle switch using pure CSS.
By removing the default UI with appearance: none;, you can create 13 em‑based custom switch designs that scale naturally with font size.
Because each switch follows the text size, the layout remains stable even when zooming or viewing on mobile devices.
All designs are lightweight, require no JavaScript, and can be copied and used as‑is.

Rounded toggle switch (iOS‑style)
Square toggle switch
Rounded toggle switch with ON/OFF on the actuator
Square toggle switch with ON/OFF on the actuator
Rounded toggle switch with ON/OFF inside the track
Square toggle switch with ON/OFF inside the track
Thin‑track toggle switch
Toggle switch with power symbols (O / I)
Rounded toggle switch with actuator animation
Square toggle switch with actuator animation
Rocker switch
Pilot switch
Square pilot switch

Rounded Toggle Switch (iOS‑style)

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch1">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch1:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch1>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/* Off color */
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch1>input[type="checkbox"]:checked{
  background:#2C2;/* On color */
}
label.mam-toggle-switch1>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch1>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
</style>

Square Toggle Switch

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch2">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch2:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch2>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/* Off color */
  border-radius:0em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch2>input[type="checkbox"]:checked{
  background:#2C2;/* On color */
}
label.mam-toggle-switch2>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#fff;
  border-radius:0em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch2>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
</style>

Rounded Toggle Switch with ON/OFF on the Actuator

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch3">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch3:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch3>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/* Off color */
  border-radius:0.5em;
  box-shadow:0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch3>input[type="checkbox"]:checked{
  background:#2C2;/* On color */
}
label.mam-toggle-switch3>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"OFF";
  color:#333;
  font-size:0.4em;
  line-height:1em;
  padding:0.55em 0 0 0;
  overflow:visible;
  text-align:center;
  position:absolute;
  left:0.25em;
  top:0.25em;
  bottom:0.25em;
  width:2em;
  background:#FFF;
  border-radius:1em;
  transform:translateX(0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch3>input[type="checkbox"]:checked::before{
  transform:translateX(125%);
  transition:all 0.2s ease-in-out;
  content:"ON";
  color:#2C2;
}
</style>

Square Toggle Switch with ON/OFF on the Actuator

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch4">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch4:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch4>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/* Off color */
  border-radius:0em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch4>input[type="checkbox"]:checked{
  background:#2C2;/* On color */
}
label.mam-toggle-switch4>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"OFF";
  color:#333;
  font-size:0.4em;
  line-height:1em;
  padding:0.55em 0 0 0;
  overflow:visible;
  text-align:center;
  position:absolute;
  left:0.25em;
  top:0.25em;
  bottom:0.25em;
  width:2em;
  background:#FFF;
  border-radius:0em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch4>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
  content:"ON";
  color:#2C2;
}
</style>

Rounded Toggle Switch with ON/OFF Inside the Track

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch5">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch5:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch5>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#333;
  background:#AAA;/* Off color */
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch5>input[type="checkbox"]:checked{
  background:#2C2;/* On color */
}
label.mam-toggle-switch5>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch5>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
label.mam-toggle-switch5>input[type="checkbox"]::after{
  box-sizing:border-box;
  position:absolute;
  content:"OFF";
  color:#fff;
  font-size:0.4em;
  left:0.5em;
  text-align:right;
  width:calc(100% - 1em);
  top:50%;
  transform:translate(0,-50%);
}
label.mam-toggle-switch5>input[type="checkbox"]:checked::after{
  content:"ON";
  text-align:left;
}
</style>

Square Toggle Switch with ON/OFF Inside the Track

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch6">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch6:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch6>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#333;
  background:#AAA;/* Off color */
  border-radius:0em;
  box-shadow:0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch6>input[type="checkbox"]:checked{
  background:#2C2;/* On color */
}
label.mam-toggle-switch6>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch6>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
label.mam-toggle-switch6>input[type="checkbox"]::after{
  box-sizing:border-box;
  position:absolute;
  content:"OFF";
  color:#fff;
  font-size:0.4em;
  left:0.5em;
  text-align:right;
  width:calc(100% - 1em);
  top:50%;
  transform:translate(0,-50%);
}
label.mam-toggle-switch6>input[type="checkbox"]:checked::after{
  content:"ON";
  text-align:left;
}

Thin‑Track Toggle Switch

Toggle switch ON/OFF

HTML・CSSソースコードを見る

<label class="mam-toggle-switch7">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch7:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch7>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/* Base size — set to any value you prefer */
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  border:none;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch7>input[type="checkbox"]:checked{
  background-color: transparent;
}
label.mam-toggle-switch7>input[type="checkbox"]::before{
  content:"";
  position:absolute;
  left:0.1em;
  right:0.1em;
  height:0.2em;
  background:#666;/* Off color */
  border-radius:0.5em;
  box-shadow:0.1em 0.1em 0.1em 0 rgba(0,0,0,0.3);
  margin:0;
  transform:translate(0,calc(0.5em - 50%));
}
label.mam-toggle-switch7>input[type="checkbox"]:checked::before{
  background:#2C2;/* On color */
}
label.mam-toggle-switch7>input[type="checkbox"]::after{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1em;
  background:#CCC;
  border-radius:0.5em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch7>input[type="checkbox"]:checked::after{
  transform:translate(100%,0%);
  transition:all 0.2s ease-in-out;
}
</style>

Toggle Switch with Power Symbols (O / I)

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch8">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch8:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch8>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#C22;/* Off color */
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch8>input[type="checkbox"]:checked{
  background:#2C2;/* On color */
}
label.mam-toggle-switch8>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:transparent;
  border:#FFF 0.2em solid;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch8>input[type="checkbox"]:checked::before{
  width:0.2em;
  background:#FFF;
  transform:translate(1.2em,0%);
  transition:all 0.2s ease-in-out;
}
</style>

Rounded Toggle Switch with Actuator Animation

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch9">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch9:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch9>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/* Off color */
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch9>input[type="checkbox"]:checked{
  background:#2C2;/* On color */
}
label.mam-toggle-switch9>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
  animation:mam-toggle-switch9b 0.2s linear 0.0s 1 normal both running;
}
label.mam-toggle-switch9>input[type="checkbox"]:checked::before{
  animation:mam-toggle-switch9a 0.2s linear 0.0s 1 normal both running;
}
@keyframes mam-toggle-switch9a{
    0%{transform:translate(  0%,0%) scaleX(1);}
   50%{transform:translate( 64%,0%) scaleX(2);}
  100%{transform:translate(128%,0%) scaleX(1);}
}
@keyframes mam-toggle-switch9b{
    0%{transform:translate(128%,0%) scaleX(1);}
   50%{transform:translate( 64%,0%) scaleX(2);}
  100%{transform:translate(  0%,0%) scaleX(1);}
}
</style>

Square Toggle Switch with Actuator Animation

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch10">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch10:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch10>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/* Off color */
  border-radius:0em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch10>input[type="checkbox"]:checked{
  background:#2C2;/* On color */
}
label.mam-toggle-switch10>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
  animation:mam-toggle-switch10b 0.2s linear 0.0s 1 normal both running;
}
label.mam-toggle-switch10>input[type="checkbox"]:checked::before{
  animation:mam-toggle-switch10a 0.2s linear 0.0s 1 normal both running;
}
@keyframes mam-toggle-switch10a{
    0%{transform:translate(  0%,0%) scaleX(1);}
   50%{transform:translate( 64%,0%) scaleX(2);}
  100%{transform:translate(128%,0%) scaleX(1);}
}
@keyframes mam-toggle-switch10b{
    0%{transform:translate(128%,0%) scaleX(1);}
   50%{transform:translate( 64%,0%) scaleX(2);}
  100%{transform:translate(  0%,0%) scaleX(1);}
}
</style>

Rocker Switch

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch11">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch11:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch11>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  margin:0.2em 2px 2px 2px;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  /*border:1px solid #444;*/
  border-radius:0em;
  /*box-shadow:0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;*/
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch11>input[type="checkbox"]::before{
  content:"On";
  box-sizing:border-box;
  position:absolute;
  font-size:0.4em;
  margin:0;
  width:50%;
  height:100%;
  left:0;
  top:0;
  bottom:0;
  text-align:center;
  padding:0.6em 0em;
  transform-origin:100% 100%;
  color:#fff;
  transform:skew(0deg,10deg) scaleX(90%);
  background:#444;
  box-shadow:-0.2em 0.2em 0.1em 0.1em rgba(0,0,0,0.4);
  transition:all 0.2s;
}
label.mam-toggle-switch11>input[type="checkbox"]:checked::before{
  transform:skew(0deg,0deg);
  background:#2C2;
  box-shadow:0em 0.2em 0.1em 0.1em rgba(0,0,0,0.4);
}
label.mam-toggle-switch11>input[type="checkbox"]::after{
  content:"Off";
  box-sizing:border-box;
  position:absolute;
  font-size:0.4em;
  margin:0;
  width:50%;
  height:100%;
  right:0;
  top:0;
  bottom:0;
  text-align:center;
  padding:0.6em 0em;
  transform-origin:0% 100%;
  color:#fff;
  transform:skew(0deg,0deg);
  background:#f22;
  box-shadow:0em 0.2em 0.1em 0.1em rgba(0,0,0,0.4);
  transition:all 0.2s;
}
label.mam-toggle-switch11>input[type="checkbox"]:checked::after{
  transform:skew(0deg,-10deg) scaleX(90%);
  background:#444;
  box-shadow:0.2em 0.2em 0.1em 0.1em rgba(0,0,0,0.4);
}
</style>

Pilot Switch

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch12">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch12:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch12>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  margin:0.2em 0.5em 0.2em 0.1em;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/* Off color */
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch12>input[type="checkbox"]:checked{
  /*background:#2C2;*/ /* To change the ON color */
}
label.mam-toggle-switch12>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#fff;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch12>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0em 0.1em 0px rgba(34,204,34,0.3);
}
label.mam-toggle-switch12>input[type="checkbox"]::after{
  box-sizing:border-box;
  content:"";
  position:absolute;
  width:0.3em;
  height:0.3em;
  top:0.35em;
  left:2.1em;
  border-radius:50%;
  background:#999;
  box-shadow:0 0 0 0 rgba(153,153,153,0.4),
             inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4);
}
label.mam-toggle-switch12>input[type="checkbox"]:checked::after{
  background:#2c2;
  box-shadow:0 0 0.05em 0.05em rgba(34,204,34,0.4),
             inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4);
}
</style>

Square Pilot Switch

Toggle switch ON/OFF

HTML・CSS Source Code

<label class="mam-toggle-switch13">
  <input type="checkbox" />Toggle switch ON/OFF
</label>

<style>
label.mam-toggle-switch13:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/* Base size — set to any value you prefer */
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch13>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  padding:0;
  margin:0.2em 0.5em 0.2em 0.1em;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#AAA;/* Off color */
  border-radius:0.1em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch13>input[type="checkbox"]:checked{
  /*background:#2C2;*/ /* To change the ON color */
}
label.mam-toggle-switch13>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#fff;
  border-radius:0.1em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
label.mam-toggle-switch13>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0em 0.1em 0px rgba(34,204,34,0.3);
}
label.mam-toggle-switch13>input[type="checkbox"]::after{
  box-sizing:border-box;
  content:"";
  position:absolute;
  width:0.3em;
  height:0.3em;
  top:0.35em;
  left:2.1em;
  border-radius:50%;
  background:#999;
  box-shadow:0 0 0 0 rgba(153,153,153,0.4),
             inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4);
}
label.mam-toggle-switch13>input[type="checkbox"]:checked::after{
  background:#2c2;
  box-shadow:0 0 0.05em 0.05em rgba(34,204,34,0.4),
             inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4);
}
</style>