<div class="demo-container">
  <header class="site-header">
    <h1>Toggle Switch - Styling</h1>
  </header>
  <main>
    <section class="content-container">
      <section class="content">

        <div class="inner-content">
          <div class="demo-item">
            <label>
              <span>Toggle</span>
              <input type="checkbox" switch checked />
            </label>
          </div>
        </div>

        <span class="support-banner">The <code>switch</code> attribute is not supported in your browser</span>
      </section>
    </section>
  </main>
  <footer class="site-footer">
    <p>Switching it up with HTML's Latest Control</p>
  </footer>
</div>
input[type="checkbox"][switch] {
  appearance: none;
  block-size: 60px;
  inline-size: 120px;
  display: inline-grid;
  position: relative;
  background: var(--demo-color-aux-400);
  color: var(--demo-color-black);
  padding: var(--demo-spacing-1x);
  overflow: clip;
  transition: background 0.25s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  
  &::thumb {
    background: url(https://static.thenounproject.com/png/4572826-200.png) no-repeat center var(--demo-color-white);
    background-size: 50% 50%;
    block-size: 100%;
    inline-size: 50%;
    transition: translate 0.25s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    z-index: 1;
    cursor: pointer;
  }
  
  &:checked {
    background: var(--demo-color-primary);
  }
  
  &::thumb, &::track {
    grid-area: 1/1;
  }
  
  &:checked::thumb {
    translate: 100%;
  }
  
  &::before,
  &::after {
    position: absolute;
    display: grid;
    place-items: center;
    inline-size: 60px;
    block-size: 100%;
    font-size: var(--demo-font-size-lg);
    text-transform: uppercase;
  }

  &::before {
    content: "Off";
    inset-inline-end: var(--demo-spacing-1x);
  }

  &::after {
    font-weight: var(--demo-font-weight-bold);
    content: "On";
    inset-inline-start: var(--demo-spacing-1x);
  }

  &:checked::after {
    color: var(--demo-color-black);
  }
}


h2 {
  grid-column: 1/-1;
}

.support-banner {
  display: block;
  background: var(--demo-color-red-600);
  padding: var(--demo-spacing-2x) var(--demo-spacing-4x);
  border-radius: var(--demo-border-radius-sm);
  color: var(--demo-color-white);
  font-weight: var(--demo-font-weight-medium);
}

@supports selector(::thumb) {
  .support-banner {
    display: none;
  }
}

label {
  display: grid;
  gap: var(--demo-spacing-2x);
  justify-items: center;
  font-weight: var(--demo-font-weight-medium);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.inner-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--demo-spacing-12x);
  justify-content: center;
}

:root {
  --demo-font-size-xs: .75rem;
  --demo-font-size-sm: .875rem;
  --demo-font-size-md: 1rem;
  --demo-font-size-lg: 1.25rem;
  --demo-font-size-xl: 1.5rem;
  --demo-font-size-2xl: 2rem;
  --demo-font-size-3xl: 3rem;
  --demo-font-size-4xl: 4rem;
  
  --demo-font-weight-base: 400;
  --demo-font-weight-regular: var(--demo-font-weight-base);
  --demo-font-weight-medium: calc(var(--demo-font-weight-base) + 100);
  --demo-font-weight-bold: calc(var(--demo-font-weight-base) + 300);
  --demo-font-weight-extra-bold: calc(var(--demo-font-weight-base) + 400);
  
  --demo-color-primary: var(--demo-color-blue-500);
  --demo-color-secondary: var(--demo-color-red-500);
  --demo-color-tertiary: var(--demo-color-yellow-500);
  --demo-color-white: var(--demo-color-aux-50);
  --demo-color-black: var(--demo-color-aux-950);
  
  --demo-color-blue-50: #E1F2FF;
  --demo-color-blue-100: #BDE2FF;
  --demo-color-blue-200: #80C8FE;
  --demo-color-blue-300: #3EABFE;
  --demo-color-blue-400: #018DF9;
  --demo-color-blue-500: #0168B8;
  --demo-color-blue-600: #015493;
  --demo-color-blue-700: #013F70;
  --demo-color-blue-800: #002B4C;
  --demo-color-blue-900: #001424;
  --demo-color-blue-950: #000C14;
  
  --demo-color-red-50: #FBEBEA;
  --demo-color-red-100: #F6D8D5;
  --demo-color-red-200: #EDB0AB;
  --demo-color-red-300: #E58980;
  --demo-color-red-400: #DC6156;
  --demo-color-red-500: #D33A2C;
  --demo-color-red-600: #A92E23;
  --demo-color-red-700: #7F231A;
  --demo-color-red-800: #541712;
  --demo-color-red-900: #2A0C09;
  --demo-color-red-950: #150604;
  
  --demo-color-yellow-50: #FEF8EC;
  --demo-color-yellow-100: #FDF1D8;
  --demo-color-yellow-200: #FBE2B2;
  --demo-color-yellow-300: #F8D48B;
  --demo-color-yellow-400: #F6C665;
  --demo-color-yellow-500: #F4B63C;
  --demo-color-yellow-600: #E89F0D;
  --demo-color-yellow-700: #AE770A;
  --demo-color-yellow-800: #744F07;
  --demo-color-yellow-900: #3A2803;
  --demo-color-yellow-950: #1D1402;

  --demo-color-aux-50: #f8f8f7;
  --demo-color-aux-100: #e8e6e6;
  --demo-color-aux-200: #d8d5d4;
  --demo-color-aux-300: #c6c1bf;
  --demo-color-aux-400: #b5afad;
  --demo-color-aux-500: #0C080C;
  --demo-color-aux-600: #090609;
  --demo-color-aux-700: #060406;
  --demo-color-aux-800: #060406;
  --demo-color-aux-900: #030203;
  --demo-color-aux-950: #0C080C;
  
  --demo-spacing-base: .25rem;
  --demo-spacing-half: calc(var(--demo-spacing-base) / 2);
  --demo-spacing-1x: calc(var(--demo-spacing-base)* 1);
  --demo-spacing-2x: calc(var(--demo-spacing-base)* 2);
  --demo-spacing-3x: calc(var(--demo-spacing-base)* 3);
  --demo-spacing-4x: calc(var(--demo-spacing-base)* 4);
  --demo-spacing-5x: calc(var(--demo-spacing-base)* 5);
  --demo-spacing-6x: calc(var(--demo-spacing-base)* 6);
  --demo-spacing-7x: calc(var(--demo-spacing-base)* 7);
  --demo-spacing-8x: calc(var(--demo-spacing-base)* 8);
  --demo-spacing-10x: calc(var(--demo-spacing-base)* 10);
  --demo-spacing-12x: calc(var(--demo-spacing-base)* 12);
  --demo-spacing-14x: calc(var(--demo-spacing-base)* 14);
  --demo-spacing-16x: calc(var(--demo-spacing-base)* 16);
  --demo-spacing-20x: calc(var(--demo-spacing-base)* 20);
  
  --demo-border-radius-circle: 50%;
  --demo-border-radius-pill: 999px;
  --demo-border-radius-xs: .25rem;
  --demo-border-radius-sm: .5rem;
  --demo-border-radius-md: 1rem;
  --demo-border-radius-lg: 1.5rem;
  --demo-border-radius-xl: 2rem;
  
  --demo-inline-size: 90vi;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: var(--demo-color-black);
  font-family: "Barlow", sans-serif;
  font-style: normal;
  font-size: 16px;
  background-image: linear-gradient(
    305deg,
    var(--demo-color-blue-500) 0%,
    var(--demo-color-blue-700) 50%,
    var(--demo-color-blue-500) 100%
  );
  padding: var(--demo-spacing-4x);
}

.demo-container {
  background: var(--demo-color-aux-50);
  display: grid;
  min-block-size: calc(100vb - var(--demo-spacing-4x) * 2);
  grid-template-columns: 1fr;
  place-items: center;
  gap: var(--demo-spacing-4x);
  align-content: center;
}

.content-container {
  border-block: 3px solid var(--demo-color-secondary);
  padding: var(--demo-spacing-6x) 0;
  inline-size: var(--demo-inline-size);
}

.content {
  background: var(--demo-color-red-50);
  padding: var(--demo-spacing-12x);
  display: grid;
  justify-content: center;
  gap: var(--demo-spacing-10x);
  align-items: flex-start;
  color: var(--demo-color-black);
}

.site-header {
  inline-size: var(--demo-inline-size);
  text-align: start;
  font-weight: var(--demo-font-weight-bold);
  text-transform: uppercase;
  font-size: var(--demo-font-size-lg);
}

.site-footer {
  inline-size: var(--demo-inline-size);
  text-align: end;
  font-weight: var(--demo-font-weight-medium);
  text-transform: uppercase;
}

code {
  font-family: "Roboto Mono", monospace;
  padding: var(--demo-spacing-half) var(--demo-spacing-2x);
  background-color: var(--demo-color-tertiary);
  color: var(--demo-color-black);
  border-radius: var(--demo-border-radius-sm);
}

.demo-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--demo-spacing-8x);
  justify-items: center;
  position: relative;
}

.item-heading {
  font-size: var(--demo-font-size-lg);
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap
  2. https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.