CSS-only toggle

In this example below you will see how to do a CSS-only toggle with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by egiroux, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright egiroux ©
  • HTML
  • CSS
  • JavaScript
    <h1>CSS Only Toggle</h1>

<form>
  <h2>Radios</h2>
  <div class="toggle">
      <input type="radio" value="1" name="choice" id="option1" required>
      <label for="option1">Option 1</label>
      <div class="toggle-selection"></div>
      <input type="radio" value="2" name="choice" id="option2" required>
      <label for="option2">Option 2</label>
  </div>

  <h2>Checkbox</h2>
  <div class="toggle">
      <input type="checkbox" value="0" name="check" id="check">
      <label for="check"><span class="on">On</span><span class="off">Off</span></label>
      <div class="toggle-selection"></div>
  </div>
</form>

/*Downloaded from https://www.codeseek.co/egiroux/css-only-toggle-aNPRyK */
    body
  font-family: "Lato", Arial, Helvetica, sans-serif
  padding: 4em 0
  text-align: center

*
  box-sizing: border-box

h1
  font-size: 2em
  text-transform: uppercase
  font-weight: bold
  color: SlateGrey
  margin-bottom: 1em
  
h2
  font-size: 1.5em
  margin-top: 2em
  margin-bottom: 1em
  color: DarkSeaGreen

.toggle
  position: relative
  z-index: 0
  white-space: nowrap
  
  // Make sure there is no whitespace between the labels
  letter-spacing: -0.31em
  text-rendering: optimizespeed
  > *
    letter-spacing: normal
    word-spacing: normal
    text-rendering: auto
  
  // Default styles for toggle
  .toggle-selection
    position: relative
    z-index: -1
    display: inline-block
    vertical-align: middle
    width: 4em
    padding: 0 2em 0 0
    margin: 0 -2em
    background: SlateGrey
    color: transparent
    font-size: 0.6875em
    border-radius: 1em
    transition: all 0.25s ease-in
    // Checkmark
    &:before
      content: '✓'
      display: inline-block
      width: 2em
      text-align: center
      line-height: 2em
    // Position indicator
    &:after
      content: ''
      position: absolute
      left: 25%
      top: 50%
      display: block
      width: 1.6em
      height: 1.6em
      margin: 0.2em
      margin-top: -0.8em
      background: snow
      border-radius: 50%
      transition: left 0.25s ease-in
    
  // Default styles for labels
  label
    display: inline-block
    vertical-align: middle
    max-width: 50%
    color: SlateGrey
    text-transform: uppercase
    font-weight: normal
    white-space: normal
    // Add padding for the clickable zone to extend to the middle of the widget
    &:first-of-type
      padding-right: 3em
    &:last-of-type
      padding-left: 3em
  
  input[type="radio"]
    // Hide radio buttons
    position: absolute
    opacity: 0
      
    // An option was checked, select the last option by default
    &:valid
      ~ .toggle-selection
        padding: 0 2em 0 0
        color: white
        background: DarkSeaGreen
        &:after
          left: 50%
      
    // Styles for checked inputs
    &:checked
      + label
        color: DarkSeaGreen
      
      // First option was checked
      ~ .toggle-selection
        padding: 0 0 0 2em
        &:after
          left: 0
        
    // Focus
    
    &:focus
      + label
        color: darken(DarkSeaGreen, 20)
      
  
  // Checkbox

  input[type="checkbox"]
    // Hide Checkbox
    opacity: 0
    position: absolute
    
    ~ .toggle-selection
      padding: 0 2em 0 0
      margin: 0 0 0 -4em
      &:after
        left: 50%
      
    + label
      display: inline-block
      vertical-align: middle
      max-width: none
      padding-left: 0
      padding-right: 4em
      height: 1em
      line-height: 1
      overflow: hidden
      margin-bottom: 0
      .on, .off
        display: block
        transition: all 0.25s ease-in
        opacity: 1
      .on
        visibility: hidden
        opacity: 0
      .off
        transform: translateY(-100%)

    // Checked

    &:checked
      + label
        color: DarkSeaGreen
        .on
          visibility: visible
          opacity: 1
        .off
          visibility: hidden
          opacity: 0

      ~ .toggle-selection
        padding: 0 0 0 2em
        color: white
        background: DarkSeaGreen
        &:after
          left: 0
        
    //Focus
    
    &:focus
      + label
        color: darken(DarkSeaGreen, 20)


/*Downloaded from https://www.codeseek.co/egiroux/css-only-toggle-aNPRyK */
    

Comments