Chuyển đổi chuyển đổi html

Công tắc bật tắt đại diện cho một công tắc vật lý cho phép người dùng bật hoặc tắt mọi thứ, như công tắc tắt. Khi nhấp vào công tắc bật tắt là một hành động bao gồm hai bước. lựa chọn (lựa chọn) và loại bỏ (thực thi), trong khi hộp kiểm chỉ bao gồm lựa chọn hành động (lựa chọn) một tùy chọn, còn việc loại bỏ (thực thi) của hộp kiểm thì sẽ cần một trình điều khiển khác

Khi quyết định sử dụng hộp kiểm hoặc công tắc bật tắt, tốt hơn hết nên tập trung vào cảnh sử dụng thay vì tập trung vào chức năng của chúng. Dưới đây là một số trường hợp sử dụng đi kèm với hướng dẫn để giúp người làm có cái đúng đắn hơn khi sử dụng nhìn hai trình điều khiển này trong các mẫu thiết kế bản gốc

Trường hợp 1. Phản hồi tức thời (Instant response)

Sử dụng Toggle switch when,

• Cần một phản hồi tức thì mà không có hành động rõ ràng gì hết
• Đặt yêu cầu bật/tắt chức năng và hiển thị/ẩn để hiển thị kết quả
• Người dùng cần thực hiện các hành động tức thì mà không cần xem xét lại hoặc chờ xác nhận

Với trường hợp cần phản hồi tức thì như thế này thì tốt hơn hết là sử dụng công tắc bật tắt

Trường hợp 2. Xác nhận cài đặt (Xác nhận cài đặt)

Use Checkbox when,

• Cài đặt được áp dụng khi cần được xác nhận hoặc xem xét bởi người dùng trước khi gửi đi (đã gửi)
• Cần thông qua các hành động như Gửi (Gửi), Ok, Tiếp theo, Áp dụng trước khi hiển thị kết quả
• Người dùng phải thực hiện các bước bổ sung để thay đổi trước khi có hiệu lực

Ưu tiên sử dụng hộp kiểm khi có các hành động rõ ràng được yêu cầu khi xác nhận cài đặt

Trường hợp 3. Nhiều tùy chọn (Nhiều lựa chọn)

Use Checkbox when,

• Có nhiều tùy chọn và người dùng phải chọn một hoặc nhiều tùy chọn
• Nếu nhấp nhiều vào từng cái công tắc bật tắt và chờ đợi kết quả sau mỗi lần nhấp thì sẽ khá tốn thời gian

Khi cần chọn nhiều tùy chọn trong danh sách thì trải nghiệm tốt nhất là hộp kiểm sử dụng

Trường hợp 4. Trạng thái không xác định (Indeterminate state)

Sử dụng Hộp kiểm khi, Bật lửa một trạng thái lựa chọn không xác định khi có quá nhiều tùy chọn trong cùng một nhóm thuộc một tùy chọn cha. Trạng thái không xác định này sẽ biểu thị rằng có nhiều lựa chọn tùy ý (nhưng không phải tất cả) sẽ được lựa chọn trong một danh sách liệt kê. Trong trường hợp này, nên chọn hộp kiểm tốt nhất là sử dụng

Trường hợp 5. Trạng thái rõ ràng của hình ảnh rõ ràng (Xóa trạng thái trực quan)

Use Checkbox when,

• Có khả năng bị nhầm với trạng thái bật/tắt trạng thái của công tắc bật tắt. Đôi khi gây khó hiểu không biết rằng công tắc đang thể hiện một trạng thái hay một hành động
• Khi cần phải cung cấp rõ ràng trạng thái được lựa chọn hoặc không được lựa chọn

Đôi khi công tắc bật tắt không cho biết đó là trạng thái hay hành động

Trường hợp 6. Các mục liên quan (Related items)

Use Checkbox when,

• Người dùng phải lựa chọn các tùy chọn trong danh sách danh sách các mục liên quan đầu tiên

Để chọn các mục liên quan trong một danh sách, nên sử dụng hộp kiểm

Sử dụng Toggle switch when,

• Người dùng cần thay đổi các tính năng độc lập hoặc một hành vi độc lập

Với các mục độc lập nên sử dụng công tắc bật tắt để lựa chọn

Trường hợp 7. Menu option (Single option)

Use Checkbox when,

• Cung cấp một kiểu lựa chọn có hoặc không
• Chỉ có một lựa chọn là lựa chọn hoặc bỏ lựa chọn, mang ý nghĩa rõ ràng nhất quán

With type yes or no option thì nên sử dụng hộp kiểm

Sử dụng Toggle switch when,

• Lựa chọn lựa chọn lựa chọn lựa chọn đơn này là bắt buộc và bạn chỉ có hai tùy chọn là bật/tắt để quyết định

Trong trường hợp quyết định bật/tắt này, tốt hơn hết là sử dụng công tắc bật tắt

Kết luận

Điều quan trọng là cần cung cấp một trình điều khiển đúng nơi đúng cách để khiến hình thức trở nên thân thiện với người dùng hơn. Vì các biểu mẫu thường khá dài và có nhiều tùy chọn nên sẽ gây chán đời cho người dùng nếu họ phải thực hiện quá nhiều lần click để điền thông tin của mình. Các trường hợp trên sẽ giúp người làm có những quyết định đúng đắn và hợp lý trong việc sử dụng checkbox hay bật tắt công tắc trong form của mình

Ý tưởng thực hiện ToggleButton chỉ với HTML và CSS là chúng ta sẽ sử dụng hộp kiểm của HTML. Sau đó ta dựa vào sự kiện đã chọn, bỏ chọn của hộp kiểm để hiển thị 2 trạng thái Tắt và Bật cho ToggleButton

Đầu tiên, ta có cấu trúc HTML cho phần ToggleButton như sau

<div class="toggle-button-demo">
  <h4>ToggleButton Demo</h4>
  <input class="toggle toggle-ios" id="toggle1" type="checkbox"/>
  <label class="toggle-btn" for="toggle1"></label>
</div>

Trong cấu trúc HTML trên, ta có đầu vào với

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

Ta sử dụng CSS selector phương thức

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

Tiếp theo ta sẽ xử lý sự kiện đã chọn và bỏ chọn của hộp kiểm như sau

.toggle-ios:checked + .toggle-btn {
  background: #86d993;
}
.toggle-ios:checked + .toggle-btn:after {
  left: 50%;
}

Ở trên, đơn giản chúng ta chỉ cần dựa vào sự kiện

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-ios:checked + .toggle-btn {
  background: #86d993;
}
.toggle-ios:checked + .toggle-btn:after {
  left: 50%;
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.toggle-ios:checked + .toggle-btn {
  background: #86d993;
}
.toggle-ios:checked + .toggle-btn:after {
  left: 50%;
}

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}