效果图如上:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯css仿ios开关按钮</title> <style> .switch{ width: 400px; height: 100px; } .switch li{ clear: both; line-height: 49px; border-bottom: 1px solid #cccccc; list-style: none; } .switch li input{ display: none; } .switch li label{ width: 50px; height: 28px; margin-top: 11px; background-color: #cccccc; box-sizing: border-box; border-radius: 15px; float: right; box-shadow: 0 1px 2px rgba(247, 246, 123