#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 3.5em; 7 height: 2em; 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: #fff; 26 border: 1px solid #99999; 27 transition: .4s; 28} 29 30.slider:before { 31 position: absolute; 32 content: ""; 33 height: 1.5em; 34 width: 1.5em; 35 left: 0.20em; 36 bottom: 0.25em; 37 background-color: white; 38 transition: .4s; 39 box-shadow: 0 0 2px 0px #999999; 40} 41 42input:checked + .slider { 43 background-color: #2da54f; 44} 45 46input:focus + .slider { 47 box-shadow: 0 0 1px #2196F3; 48} 49 50input:checked + .slider:before { 51 transform: translateX(1.5em); 52}
1.5K views
1.5K views
Comments
MIT License