Breaking News: Grepper is joining You.com. Read the official announcement!

html toggle switch

Add Answer

YOU.com answered on March 21, 2022 Popularity 9/10 Helpfulness 3/10

answer html toggle switch

related html switch toggle

related CSS Toggle Switch

html toggle switch

Comment

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Toggle switch styles */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }
    
    .toggle-switch input[type="checkbox"] {
      display: none;
    }
    
    .toggle-switch-label {
      display: block;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid #ccc;
      border-radius: 20px;
    }
    
    .toggle-switch-inner {
      width: 200%;
      margin-left: -100%;
      transition: margin 0.3s ease-in 0s;
    }
    
    .toggle-switch-inner:before,
    .toggle-switch-inner:after {
      float: left;
      width: 50%;
      height: 30px;
      padding: 0;
      line-height: 34px;
      font-size: 14px;
      color: white;
      font-weight: bold;
      box-sizing: border-box;
    }
    
    .toggle-switch-inner:before {
      content: "ON";
      padding-left: 10px;
      background-color: #4CAF50;
    }
    
    .toggle-switch-inner:after {
      content: "OFF";
      padding-right: 10px;
      background-color: #ccc;
      text-align: right;
    }
    
    .toggle-switch input[type="checkbox"]:checked + .toggle-switch-label .toggle-switch-inner {
      margin-left: 0;
    }
    
    /* Optional: Styling when the toggle switch is disabled */
    .toggle-switch input[type="checkbox"]:disabled + .toggle-switch-label {
      opacity: 0.6;
      cursor: not-allowed;
    }
    
    .toggle-switch input[type="checkbox"]:disabled + .toggle-switch-label .toggle-switch-inner:before {
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <h2>Toggle Switch Demo</h2>
  <div class="toggle-switch">
    <input type="checkbox" id="toggle-switch-checkbox">
    <label class="toggle-switch-label" for="toggle-switch-checkbox">
      <span class="toggle-switch-inner"></span>
    </label>
  </div>
</body>

</html>

Popularity 9/10 Helpfulness 3/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

html switch toggle

Comment

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

</body>
</html>

Popularity 10/10 Helpfulness 3/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Sep 06 2022

marktecher.com

0 Answers Avg Quality 2/10

CSS Toggle Switch

Comment

<div class="switch-toggle">
    <div class="button-check" id="button-check">
      <input type="checkbox" class="checkbox">
      <span class="switch-btn"></span>
      <span class="layer"></span>
    </div>
</div>

<style> 
* {
  padding: 0;
  margin: 0;
  outline: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.switch-toggle {
  display: flex;
  height: 100%;
  align-items: center;
}
.switch-btn, .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button-check {
  position: relative;
  width: 90px;
  height: 46px;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.switch-btn {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #8cf7a0;
  transition: 0.3s ease all;
  z-index: 1;
}
#button-check .switch-btn:before, #button-check .switch-btn:after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 20px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #00921c;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
  display: flex;
  align-items: center;
  justify-content: center;
}

#button-check .switch-btn:before {
  content: 'ON';
}

#button-check .switch-btn:after {
  content: 'OFF';
}

#button-check .switch-btn:after {
  right: -50px;
  left: auto;
  background-color: #F44336;
}

#button-check .checkbox:checked + .switch-btn:before {
  left: -50px;
}

#button-check .checkbox:checked + .switch-btn:after {
  right: 4px;
}

#button-check .checkbox:checked ~ .layer {
  background-color: #fdd1d1;
}
</style>

Popularity 10/10 Helpfulness 3/10 Language css

Source: blog.stackfindover.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 21 2022

Splendid Sable

0 Answers Avg Quality 2/10

html toggle switch

Contents

More Related Answers

html toggle switch

Closely Related Answers

html switch toggle

CSS Toggle Switch

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.