ในการสร้าง Toggle Switch ด้วย CSS โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } span { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } span:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + span { background-color: rgb(85, 21, 138); } input:focus + span { box-shadow: 0 0 1px rgb(255, 77, 211); } input:checked + span:before { transform: translateX(26px); } span.round { border-radius: 34px; } span.round:before { border-radius: 50%; } </style> </head> <body> <h1>Toggle Switch Example</h1> <label class="switch"> <input type="checkbox"> <span class="round"></span> </label> <label class="switch"> <input type="checkbox" checked> <span class="round"></span> </label> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
