Bạn có thể dùng CSS để tạo một “công tắc” (Toggle Switch) thay vì checkbox, ví dụ như On/Off chẳng hạn.
Bạn chỉ cần dùng CSS, không cần phải dùng Js và nó hoạt động tốt trên các trình duyệt hiện nay.
Dưới đây là code 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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
/* Checkbox switch */ .checkbox-switch { cursor: pointer; display: inline-block; overflow: hidden; position: relative; text-align: left; width: 80px; height: 30px; -webkit-border-radius: 30px; border-radius: 30px; line-height: 1.2; font-size: 14px; } .checkbox-switch input.input-checkbox { position: absolute; left: 0; top: 0; width: 80px; height: 30px; padding: 0; margin: 0; opacity: 0; z-index: 2; cursor: pointer; } .checkbox-switch .checkbox-animate { position: relative; width: 80px; height: 30px; background-color: #95a5a6; -webkit-transition: background 0.25s ease-out 0s; transition: background 0.25s ease-out 0s; } .checkbox-switch .checkbox-animate:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; border-radius: 10px; -webkit-border-radius: 10px; background-color: #7f8c8d; top: 5px; left: 5px; -webkit-transition: left 0.3s ease-out 0s; transition: left 0.3s ease-out 0s; z-index: 10; } .checkbox-switch input.input-checkbox:checked + .checkbox-animate { background-color: #2ecc71; } .checkbox-switch input.input-checkbox:checked + .checkbox-animate:before { left: 55px; background-color: #27ae60; } .checkbox-switch .checkbox-off, .checkbox-switch .checkbox-on { float: left; color: #fff; font-weight: 700; padding-top: 6px; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .checkbox-switch .checkbox-off { margin-left: 30px; opacity: 1; } .checkbox-switch .checkbox-on { display: none; float: right; margin-right: 35px; opacity: 0; } .checkbox-switch input.input-checkbox:checked + .checkbox-animate .checkbox-off { display: none; opacity: 0; } .checkbox-switch input.input-checkbox:checked + .checkbox-animate .checkbox-on { display: block; opacity: 1; } |
Mời bạn xem demo và có thể tải source về theo link bên dưới.
Xem Demo Source Hosting tốt nhất