模拟實作一個選中和未選中的樣式。
沒有樣式時的效果圖如下，
最終添加樣式後效果如下。
實際開發中，我嘗試使用這種方法。
這種方法有個問題：點選框時無法選中，必須點文字才能選中 。
這在實際應用中肯定是無法忍受的,實際應用中推薦第二種方法。
用到圖檔：
原理：label和input外面套一層.custom-checkbox作為父元素相對定位。
input絕對定位于左上角，label也絕對定位于左上角，覆寫input的方塊。通過給label設定padding-left和背景圖來模拟未選中狀态。選中時加一個.right類更改背景圖檔為選中狀态的背景圖。
通過js點選事件，label被點選時在選中與未選中狀态切換。
問題：點選頻率過快，會輕按兩下選中文字，影響使用者體驗。
解決辦法：
效果：
單選框樣式和複選框原理是類似的。上面辦法都是一種模拟實作。
還有一點我想說的是推動前端技術發展的，不僅有前端同行們，還有我們可愛的設計師們。如果隻有前端，我們會停留在已有技術的可行性上做一些保守的效果，但是有了設計師的“完美主義”，讓我們腦洞大開，挑戰自我，促進技術更上一層樓。