1 line
1.4 KiB
CSS
1 line
1.4 KiB
CSS
.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:#3498db}input:focus+.slider{box-shadow:0 0 1px #3498db}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.range-slider{-webkit-appearance:none;border-radius:5px;width:100%;height:25px;background:#d8d8d8;outline:none;opacity:.7;transition:opacity .2s}.range-slider:hover{opacity:1}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#5b6568;cursor:pointer}.range-slider::-moz-range-thumb{width:25px;height:25px;background:#5b6568;cursor:pointer}.range-slider-rounded{-webkit-appearance:none;border-radius:5px;width:100%;height:15px;background:#d8d8d8;outline:none;opacity:.7;transition:opacity .2s}.range-slider-rounded:hover{opacity:1}.range-slider-rounded::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;width:25px;height:25px;background:#5b6568;cursor:pointer}.range-slider-rounded::-moz-range-thumb{width:25px;height:25px;background:#ecf0f1;cursor:pointer} |