一.需求：替換單選按鈕默認圖標

二.原理：

　　1.使用label擴大選擇熱區，隱藏input元素，

　　2.添加一個元素設置其背景圖作為默認顯示的按鈕圖標并顯示，

　　3.為該元素添加一個偽元素相對于添加的元素絕對定位且默認不顯示，在該偽元素中添加默認選中的背景圖

　　4.在input元素選中后，顯示該偽元素，因為偽元素是絕對定位層級比較高所以會顯示在上面，即選中的圖標

三.HTML

四.CSS

五.效果

近重視實現思路和重要代碼，部分省略，望見諒

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。