Cara Menciptakan Toggle-Style Checkbox Dengan Css

Cara Membuat toggle-style checkbox Dengan CSS  - Menyembunyikan atau memunculkan element pada prinsipnya menggunkan jQuery. Penggunaan pada jQuery menyerupai berikut :

$(document).ready(function() {
   $('.buka').click(function() {
      $('.tutup').slide toggle('slow');
    });
});

Arti dari toggle yakni beralih, pada fungsi toggle atau pengalihan ini tidak memakai jQuery ataupun Javascript namun memakai properti CSS. Pengalihan ini terjadi warna dengan difungsikan dengan tombol On Off.

Accessible toggle-style checkbox With CSS

Demo   CODE

Dengan menggunkan CSS maka anda akan semakin gampang dalam mengubah nilai-nilai pada element.

CSS

.can-toggle {
  position: relative;
}
.can-toggle *, .can-toggle *:before, .can-toggle *:after {
  box-sizing: border-box;
}
.can-toggle input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.can-toggle input[type="checkbox"][disabled] label {
  pointer-events: none;
}
.can-toggle input[type="checkbox"][disabled] label .can-toggle__switch {
  opacity: 0.4;
}
.can-toggle input[type="checkbox"]:checked label .can-toggle__switch:before {
  content: attr(data-unchecked);
  left: 0;
}
.can-toggle input[type="checkbox"]:checked label .can-toggle__switch:after {
  content: attr(data-checked);
}
.can-toggle label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.can-toggle label .can-toggle__label-text {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 32px;
}
.can-toggle label .can-toggle__switch {
  position: relative;
}
.can-toggle label .can-toggle__switch:before {
  content: attr(data-checked);
  position: absolute;
  top: 0;
  text-transform: uppercase;
  text-align: center;
}
.can-toggle label .can-toggle__switch:after {
  content: attr(data-unchecked);
  position: absolute;
  z-index: 5;
  text-transform: uppercase;
  text-align: center;
  background: white;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.can-toggle input[type="checkbox"][disabled] label {
  color: rgba(119, 119, 119, 0.5);
}
.can-toggle input[type="checkbox"]:focus label .can-toggle__switch, .can-toggle input[type="checkbox"]:hover label .can-toggle__switch {
  background-color: #777;
}
.can-toggle input[type="checkbox"]:focus label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:hover label .can-toggle__switch:after {
  color: #5e5e5e;
}
.can-toggle input[type="checkbox"]:hover label {
  color: #6a6a6a;
}
.can-toggle input[type="checkbox"]:checked label:hover {
  color: #55bc49;
}
.can-toggle input[type="checkbox"]:checked label .can-toggle__switch {
  background-color: #70c767;
}
.can-toggle input[type="checkbox"]:checked label .can-toggle__switch:after {
  color: #4fb743;
}
.can-toggle input[type="checkbox"]:checked:focus label .can-toggle__switch, .can-toggle input[type="checkbox"]:checked:hover label .can-toggle__switch {
  background-color: #5fc054;
}
.can-toggle input[type="checkbox"]:checked:focus label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:checked:hover label .can-toggle__switch:after {
  color: #47a43d;
}
.can-toggle label .can-toggle__label-text {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.can-toggle label .can-toggle__switch {
  -webkit-transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
          transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
  background: #848484;
}
.can-toggle label .can-toggle__switch:before {
  color: rgba(255, 255, 255, 0.5);
}
.can-toggle label .can-toggle__switch:after {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  color: #777;
}
.can-toggle input[type="checkbox"]:focus label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:hover label .can-toggle__switch:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.can-toggle input[type="checkbox"]:checked label .can-toggle__switch:after {
  -webkit-transform: translate3d(65px, 0, 0);
          transform: translate3d(65px, 0, 0);
}
.can-toggle input[type="checkbox"]:checked:focus label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:checked:hover label .can-toggle__switch:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.can-toggle label {
  font-size: 14px;
}
.can-toggle label .can-toggle__switch {
  height: 36px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 134px;
      -ms-flex: 0 0 134px;
          flex: 0 0 134px;
  border-radius: 4px;
}
.can-toggle label .can-toggle__switch:before {
  left: 67px;
  font-size: 12px;
  line-height: 36px;
  width: 67px;
  padding: 0 12px;
}
.can-toggle label .can-toggle__switch:after {
  top: 2px;
  left: 2px;
  border-radius: 2px;
  width: 65px;
  line-height: 32px;
  font-size: 12px;
}
.can-toggle label .can-toggle__switch:hover:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-small input[type="checkbox"]:focus label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type="checkbox"]:hover label .can-toggle__switch:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-small input[type="checkbox"]:checked label .can-toggle__switch:after {
  -webkit-transform: translate3d(44px, 0, 0);
          transform: translate3d(44px, 0, 0);
}
.can-toggle.can-toggle--size-small input[type="checkbox"]:checked:focus label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type="checkbox"]:checked:hover label .can-toggle__switch:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-small label {
  font-size: 13px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch {
  height: 28px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 90px;
      -ms-flex: 0 0 90px;
          flex: 0 0 90px;
  border-radius: 2px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch:before {
  left: 45px;
  font-size: 10px;
  line-height: 28px;
  width: 45px;
  padding: 0 12px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch:after {
  top: 1px;
  left: 1px;
  border-radius: 1px;
  width: 44px;
  line-height: 26px;
  font-size: 10px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch:hover:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-large input[type="checkbox"]:focus label .can-toggle__switch:after, .can-toggle.can-toggle--size-large input[type="checkbox"]:hover label .can-toggle__switch:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-large input[type="checkbox"]:checked label .can-toggle__switch:after {
  -webkit-transform: translate3d(78px, 0, 0);
          transform: translate3d(78px, 0, 0);
}
.can-toggle.can-toggle--size-large input[type="checkbox"]:checked:focus label .can-toggle__switch:after, .can-toggle.can-toggle--size-large input[type="checkbox"]:checked:hover label .can-toggle__switch:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-large label {
  font-size: 14px;
}
.can-toggle.can-toggle--size-large label .can-toggle__switch {
  height: 50px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 160px;
      -ms-flex: 0 0 160px;
          flex: 0 0 160px;
  border-radius: 4px;
}
.can-toggle.can-toggle--size-large label .can-toggle__switch:before {
  left: 80px;
  font-size: 14px;
  line-height: 50px;
  width: 80px;
  padding: 0 12px;
}
.can-toggle.can-toggle--size-large label .can-toggle__switch:after {
  top: 2px;
  left: 2px;
  border-radius: 2px;
  width: 78px;
  line-height: 46px;
  font-size: 14px;
}
.can-toggle.can-toggle--size-large label .can-toggle__switch:hover:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.demo-rebrand-1 input[type="checkbox"][disabled] label {
  color: rgba(181, 62, 116, 0.5);
}
.can-toggle.demo-rebrand-1 input[type="checkbox"]:focus label .can-toggle__switch, .can-toggle.demo-rebrand-1 input[type="checkbox"]:hover label .can-toggle__switch {
  background-color: #b53e74;
}
.can-toggle.demo-rebrand-1 input[type="checkbox"]:focus label .can-toggle__switch:after, .can-toggle.demo-rebrand-1 input[type="checkbox"]:hover label .can-toggle__switch:after {
  color: #8f315c;
}
.can-toggle.demo-rebrand-1 input[type="checkbox"]:hover label {
  color: #a23768;
}
.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked label:hover {
  color: #39916a;
}
.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked label .can-toggle__switch {
  background-color: #44ae7f;
}
.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked label .can-toggle__switch:after {
  color: #368a65;
}
.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:focus label .can-toggle__switch, .can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:hover label .can-toggle__switch {
  background-color: #3d9c72;
}
.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:focus label .can-toggle__switch:after, .can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:hover label .can-toggle__switch:after {
  color: #2f7757;
}
.can-toggle.demo-rebrand-1 label .can-toggle__label-text {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.can-toggle.demo-rebrand-1 label .can-toggle__switch {
  -webkit-transition: background-color 0.3s ease-in-out;
          transition: background-color 0.3s ease-in-out;
  background: #c14b81;
}
.can-toggle.demo-rebrand-1 label .can-toggle__switch:before {
  color: rgba(255, 255, 255, 0.6);
}
.can-toggle.demo-rebrand-1 label .can-toggle__switch:after {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  color: #b53e74;
}
.can-toggle.demo-rebrand-2 input[type="checkbox"][disabled] label {
  color: rgba(68, 68, 68, 0.5);
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:focus label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type="checkbox"]:hover label .can-toggle__switch {
  background-color: #444;
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:focus label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:hover label .can-toggle__switch:after {
  color: #2b2b2b;
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:hover label {
  color: #373737;
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked label:hover {
  color: #62b125;
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked label .can-toggle__switch {
  background-color: #75d32d;
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked label .can-toggle__switch:after {
  color: #5da924;
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:focus label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:hover label .can-toggle__switch {
  background-color: #69be28;
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:focus label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:hover label .can-toggle__switch:after {
  color: #52941f;
}
.can-toggle.demo-rebrand-2 label .can-toggle__label-text {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch {
  -webkit-transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1);
          transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  background: #515151;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:before {
  color: rgba(255, 255, 255, 0.7);
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:after {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  color: #444;
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:focus label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:hover label .can-toggle__switch:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked label .can-toggle__switch:after {
  -webkit-transform: translate3d(58px, 0, 0);
          transform: translate3d(58px, 0, 0);
}
.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:focus label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:hover label .can-toggle__switch:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.demo-rebrand-2 label {
  font-size: 13px;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch {
  height: 60px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 120px;
      -ms-flex: 0 0 120px;
          flex: 0 0 120px;
  border-radius: 60px;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:before {
  left: 60px;
  font-size: 13px;
  line-height: 60px;
  width: 60px;
  padding: 0 12px;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:after {
  top: 2px;
  left: 2px;
  border-radius: 30px;
  width: 58px;
  line-height: 56px;
  font-size: 13px;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:hover:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

HTML

.can-toggle

<div class="can-toggle">
  <input id="a" type="checkbox" />
<label for="a">
<div class="can-toggle__switch" data-checked="On" data-unchecked="Off">
</div>
<div class="can-toggle__label-text">
.can-toggle</div>
</label>
</div>

HTML

.can-toggle.can-toggle--size-small

<div class="can-toggle can-toggle--size-small">
  <input id="b" type="checkbox" />
<label for="b">
<div class="can-toggle__switch" data-checked="On" data-unchecked="Off">
</div>
<div class="can-toggle__label-text">
.can-toggle.can-toggle--size-small</div>
</label>
</div>

HTML

.can-toggle.can-toggle--size-large

<div class="can-toggle can-toggle--size-large">
  <input id="c" type="checkbox" />
<label for="c">
<div class="can-toggle__switch" data-checked="On" data-unchecked="Off">
</div>
<div class="can-toggle__label-text">
.can-toggle.can-toggle--size-large</div>
</label>
</div>

HTML

.can-toggle.demo-rebrand-1

<div class="can-toggle demo-rebrand-1">
  <input id="d" type="checkbox" />
<label for="d">
<div class="can-toggle__switch" data-checked="Good" data-unchecked="Bad">
</div>
<div class="can-toggle__label-text">
.can-toggle.demo-rebrand-1</div>
</label>
</div>

HTML

.can-toggle.demo-rebrand-2

<div class="can-toggle demo-rebrand-2">
  <input id="e" type="checkbox" />
<label for="e">
<div class="can-toggle__switch" data-checked="Yes" data-unchecked="No">
</div>
<div class="can-toggle__label-text">
.can-toggle.demo-rebrand-2</div>
</label>
</div>

Demikian kami sampaikan Cara Membuat toggle-style checkbox Dengan CSS, terimakasih sudah berkunjung di aak-share.com dan supaya bermanfaat!




Sumber http://www.websiteedukasi.com/