標籤：ack pre 屬性 偽類 char 易用 doctype head lang
之前在項目中使用滑塊開關按鈕，純css寫的，不考慮相容低版本瀏覽器，先說下原理：
使用 checkbox 的 選中 checked 屬性改變css 偽類樣式， 一定要使用-webkit-appearance: none; 先清除checkbox的預設樣式 ，否則寫其他的樣式不起作用；
好，不多說，直接上代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css滑塊開關</title> <style> .checke{ position: relative; -webkit-appearance: none; width:90px; height: 44px; line-height: 44px; background: #eee; border-radius: 30px; outline: none; } .checke:before{ position: absolute; left: 0; content: ‘‘; width: 44px; height: 44px; border-radius: 50%; background: #eee; box-shadow: 0px 0px 5px #ddd; transition: all 0.2s linear; } .checke:checked{ background: #18ff0a; } .checke:checked:before{ left: 45px; transition: all 0.2s linear; } </style></head><body><input type="checkbox" class="checke"></body></html>
一個乾淨整潔的按鈕代碼就產生了！如果需要根據按鈕樣式，決定某個資料值，就要寫在js中判斷 checkbox 是否選擇就ok了，簡單易用！
純css的滑塊開關按鈕
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
