Switch by Shoh2008
#e8e8e8
1.checkbox-wrapper-9 .tgl { 2 display: none; 3} 4 5.checkbox-wrapper-9 .tgl, 6 .checkbox-wrapper-9 .tgl:after, 7 .checkbox-wrapper-9 .tgl:before, 8 .checkbox-wrapper-9 .tgl *, 9 .checkbox-wrapper-9 .tgl *:after, 10 .checkbox-wrapper-9 .tgl *:before, 11 .checkbox-wrapper-9 .tgl + .tgl-btn { 12 box-sizing: border-box; 13} 14 15.checkbox-wrapper-9 .tgl::-moz-selection, 16 .checkbox-wrapper-9 .tgl:after::-moz-selection, 17 .checkbox-wrapper-9 .tgl:before::-moz-selection, 18 .checkbox-wrapper-9 .tgl *::-moz-selection, 19 .checkbox-wrapper-9 .tgl *:after::-moz-selection, 20 .checkbox-wrapper-9 .tgl *:before::-moz-selection, 21 .checkbox-wrapper-9 .tgl + .tgl-btn::-moz-selection, 22 .checkbox-wrapper-9 .tgl::selection, 23 .checkbox-wrapper-9 .tgl:after::selection, 24 .checkbox-wrapper-9 .tgl:before::selection, 25 .checkbox-wrapper-9 .tgl *::selection, 26 .checkbox-wrapper-9 .tgl *:after::selection, 27 .checkbox-wrapper-9 .tgl *:before::selection, 28 .checkbox-wrapper-9 .tgl + .tgl-btn::selection { 29 background: none; 30} 31 32.checkbox-wrapper-9 .tgl + .tgl-btn { 33 outline: 0; 34 display: block; 35 width: 4em; 36 height: 2em; 37 position: relative; 38 cursor: pointer; 39 -webkit-user-select: none; 40 -moz-user-select: none; 41 -ms-user-select: none; 42 user-select: none; 43} 44 45.checkbox-wrapper-9 .tgl + .tgl-btn:after, 46 .checkbox-wrapper-9 .tgl + .tgl-btn:before { 47 position: relative; 48 display: block; 49 content: ""; 50 width: 50%; 51 height: 100%; 52} 53 54.checkbox-wrapper-9 .tgl + .tgl-btn:after { 55 left: 0; 56} 57 58.checkbox-wrapper-9 .tgl + .tgl-btn:before { 59 display: none; 60} 61 62.checkbox-wrapper-9 .tgl:checked + .tgl-btn:after { 63 left: 50%; 64} 65 66.checkbox-wrapper-9 .tgl-flat + .tgl-btn { 67 padding: 2px; 68 transition: all 0.2s ease; 69 background: #fff; 70 border: 4px solid #f2f2f2; 71 border-radius: 2em; 72} 73 74.checkbox-wrapper-9 .tgl-flat + .tgl-btn:after { 75 transition: all 0.2s ease; 76 background: #f2f2f2; 77 content: ""; 78 border-radius: 1em; 79} 80 81.checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn { 82 border: 4px solid #7FC6A6; 83} 84 85.checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn:after { 86 left: 50%; 87 background: #7FC6A6; 88}
731 views
731 views
MIT License