11K views
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 11px; 4 position: relative; 5 display: inline-block; 6 width: 3.5em; 7 height: 1em; 8} 9 10/* Hide default HTML checkbox */ 11.switch input { 12 opacity: 0; 13 width: 0; 14 height: 0; 15} 16 17/* The slider */ 18.slider { 19 position: absolute; 20 cursor: pointer; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 background-color: #ccc; 26 border: 2px solid #000; 27 transition: .4s; 28 border-radius: 1px; 29} 30 31.slider:before { 32 position: absolute; 33 content: ""; 34 height: 1.3em; 35 width: 1.2em; 36 border-radius: 2px; 37 left: 0.2em; 38 bottom: 0.3em; 39 background-color: #fff; 40 border: 2px solid #000; 41 transition: 0.1s; 42} 43 44input:checked + .slider { 45 background-color: #000; 46} 47 48input:focus + .slider { 49 box-shadow: 0 0 1px #2196F3; 50} 51 52input:checked + .slider:before { 53 transform: translateX(1.3em); 54}
MIT License