Fancy Toggles

by Carson Evans

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="toggle-box">
  <input id="test1" type="checkbox" class="toggle sr-only">
  <label for="test1" class="toggle-label">
    <i class="fas fa-toggle-on toggle-on text-primary"></i>
    <i class="fas fa-toggle-off toggle-off text-primary"></i>
    On/Off
  </label>
</div>

<hr>


<div class="toggle-box">
  <input id="test2" type="checkbox" class="toggle sr-only">
  <label for="test2" class="toggle-label">
    <i class="fas fa-eye toggle-on text-success"></i>
    <i class="fas fa-eye-slash toggle-off text-danger"></i>
    Show/Hide
  </label>
</div>


<hr>

<div class="toggle-box">
  <input id="test3" type="checkbox" class="toggle sr-only">
  <label for="test3" class="toggle-label">
    <i class="fas fa-bell toggle-on text-secondary"></i>
    <i class="fas fa-bell-slash toggle-off text-warning"></i>
    Unmute/Mute
  </label>
</div>

CSS

body {
  margin: 5px;
  font-size: 24px;
}

.toggle-box {
  width: 50px;
  text-align: center;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.toggle ~ .toggle-label > .toggle-on {
  display: none;
}

.toggle:checked ~ .toggle-label > .toggle-on {
  display: inline;
}

.toggle ~ .toggle-label > .toggle-off {
  display: inline;
}

.toggle:checked ~ .toggle-label > .toggle-off {
  display: none;
}