toggle switch style02

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Toggle Switch | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="Toggle Switch">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body >
      <div class="container mt-5">
        <div class="row">
          <div class="col-lg-6">

            <div class="toggle-group">
              <input type="checkbox" name="on-off-switch" id="on-off-switch" checked="" tabindex="1">
              <label for="on-off-switch">
                  <span class="aural">Show:</span> Show Accessible Toggle Switch
              </label>
              <div class="onoffswitch pull-right" aria-hidden="true">
                  <div class="onoffswitch-label">
                      <div class="onoffswitch-inner"></div>
                      <div class="onoffswitch-switch"></div>
                  </div>
              </div>
            </div>

          </div>
        </div>
      </div>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}

body {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  /* ON/OFF Switch */
  .onoffswitch {
    position: relative;
    width: 55px;
    display: inline-block;
    font-size: 80%;
  }
  .onoffswitch .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid hsl(0, 0%, 90%);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin: 0;
  }
  .onoffswitch .onoffswitch-inner {
    width: 200%;
    margin-left: -100%;
    -webkit-transition: margin 0.15s ease-in-out;
    -o-transition: margin 0.15s ease-in-out;
    -moz-transition: margin 0.15s ease-in-out;
    transition: margin 0.15s ease-in-out;
  }
  .onoffswitch .onoffswitch-inner:before,
  .onoffswitch .onoffswitch-inner:after {
    float: left;
    width: 50%;
    height: 24px;
    padding: 0;
    line-height: 24px;
    font-size: 80%;
    color: hsl(0, 0%, 100%);
    font-weight: normal;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .onoffswitch .onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: hsl(203, 100%, 39.1569%);
    color: hsl(0, 0%, 100%);
  }
  .onoffswitch .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: hsl(0, 0%, 98%);
    color: hsl(0, 0%, 24%);
    text-align: right;
  }
  .onoffswitch .onoffswitch-switch {
    width: 22px;
    height: 22px;
    margin: 0;
    background: hsl(0, 0%, 100%);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    bottom: 0;
    right: 35px;
    -webkit-transition: right 0.15s ease-in-out;
    -o-transition: right 0.15s ease-in-out;
    -moz-transition: right 0.15s ease-in-out;
    transition: right 0.15s ease-in-out;
  }
  .toggle-group {
    position: relative;
    height: 27px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    top: 50%;
    left: 20px;
    margin-top: -13.5px;
  }
  .toggle-group input[type=checkbox] {
    position: absolute;
    left: 10px;
  }
  .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
  }
  .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-switch {
    right: 1px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }
  .toggle-group input[type=checkbox]:focus ~ .onoffswitch {
    outline: thin dotted #333;
    outline: 0;
  }
  .toggle-group label {
    position: absolute;
    cursor: pointer;
    padding-left: 65px;
    display: inline-block;
    text-align: left;
    line-height: 24px;
    width: 100%;
    z-index: 1;
    height: 24px;
    font-weight: 200;
  }
  /* ==== Accessibility ===== */
  .aural {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }
  .aural:focus {
    clip: rect(0, 0, 0, 0);
    font-size: 1em;
    height: auto;
    outline: thin dotted;
    position: static !important;
    width: auto;
    overflow: visible;
  }

                                    
Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Chercher un mot sur la liste

Chercher un mot sur la liste

Form login 02

Form login 02

Image hover 01

Image hover 01

Image hover 03

Image hover 03

Menu aside style01 slide out

Menu aside style01 slide out

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Pie Charts

Pie Charts

Timeline style01

Timeline style01

input file récupérer le nom du fichier

input file récupérer le nom du fichier

input radio checkbox b4 style

input radio checkbox b4 style

up down tr in table with js

up down tr in table with js