原文链接：https://blog.csdn.net/yang031997/article/details/102944791
<!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开关样式 */ input[type='checkbox'].switch { outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; width: 40px; height: 20px; background: #ccc; border-radius: 10px; transition: border-color .3s, background-color .3s; } input[type='checkbox'].switch::after { content: ''; display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0, 0, 2px, #999; transition: .4s; top: 2px; position: absolute; left: 2px; } input[type='checkbox'].switch:checked { background: rgb(19, 206, 102); } /* 当input[type=checkbox]被选中时：伪元素显示下面样式 位置发生变化 */ input[type='checkbox'].switch:checked::after { content: ''; position: absolute; left: 55%; top: 2px; } </style> </head> <body> <input type="checkbox" class="switch"> </body> </html>