css开关按钮样式 电脑版发表于:2024/6/5 9:57 代码如下,可以直接运行: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 0; transition: background-color 0.4s; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:checked+.slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } </style> </head> <body> <label class="switch"> <input type="checkbox" id="toggle" /> <span class="slider round"></span> </label> </body> </html> ```