Стильные выключатели на чистом CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
sup { color: #AF5D6C; } .text-center { text-align: center; } /* Important switch stuff */ label { width: 34px; height: 14px; background: lightgray; display: inline-block; border-radius: 10px; position: relative; cursor: pointer; margin: 10px; } label:before, label:after { content: ""; display: inline-block; width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: -3px; left: 0; transition: all .2s; } label:after { box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); } label:before { background: lightgray; transform: scale3d(0, 0, 1); } label:active:before { transform: scale3d(3, 3, 1); opacity: 0; } input[type=checkbox].switch { display: none; } input[type=checkbox].switch:checked + label { background: rgba(3, 155, 229, 0.5); } input[type=checkbox].switch:checked + label:before, input[type=checkbox].switch:checked + label:after { left: 14px; background: #039be5; } input[type=checkbox].switch:disabled + label { opacity: 0.4; cursor: not-allowed; } input[type=checkbox].switch.green { display: none; } input[type=checkbox].switch.green:checked + label { background: rgba(4, 196, 52, 0.5); } input[type=checkbox].switch.green:checked + label:before, input[type=checkbox].switch.green:checked + label:after { background: #04c434; } input[type=checkbox].switch.red { display: none; } input[type=checkbox].switch.red:checked + label { background: rgba(244, 67, 54, 0.5); } input[type=checkbox].switch.red:checked + label:before, input[type=checkbox].switch.red:checked + label:after { background: #f44336; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
<input type="checkbox" id="switch1" class='switch' checked/> <label for="switch1"></label> <input type="checkbox" id="switch2" class='switch red' checked/> <label for="switch2"></label> <input type="checkbox" id="switch3" class='switch green' checked/> <label for="switch3"></label> <input type="checkbox" id="switch4" class='switch green' disabled/> <label for="switch4"></label> |
