在 Web 開發(fā)中，默認的單選按鈕樣式通常比較單一，不容易與網站的整體設計風格相匹配。本文將介紹如何通過 CSS3 和 jQuery 實現自定義的單選按鈕樣式，提升界面的美觀性和用戶體驗。

首先看下html部分

HTML 定義了多個單選按鈕，每個按鈕通過 id 和 name 屬性標識。<label> 元素的 for 屬性與按鈕的 id 關聯，用于提升無障礙性。checked 屬性標記默認選中的按鈕，確保頁面加載時有一個按鈕已選中。

然后是為該dom添加樣式

label.radio 設置了單選按鈕的主要樣式。通過 display: inline-block 定義為行內塊狀元素，設置高度、寬度和圓角（border-radius: 100%）形成圓形按鈕，并使用 transition 屬性實現狀態(tài)切換時的平滑過渡效果。

span.pip 是按鈕內的選中標記，初始狀態(tài)通過 transform: scale(0, 0) 設置為不可見。使用絕對定位（position: absolute）將其放置在按鈕內部，并通過平滑的過渡效果在狀態(tài)變化時顯現。

當按鈕被選中時，label.radio.on 改變背景顏色為綠色（#44c394）。同時，span.pip 的 transform 屬性變?yōu)?scale(1, 1)，選中標記以正常大小顯示。

隱藏原生的單選按鈕。通過絕對定位和將位置移動到屏幕外（left: -9999em），僅保留自定義樣式的部分供用戶可見。

下面編寫js部分

定義一個 jQuery 插件 $.fn.rdo()，通過 $(this).each 遍歷所有的單選按鈕。檢查每個按鈕是否是 :radio 類型，并通過 data('radio-replaced') 防止重復處理已替換過的按鈕。

為每個按鈕創(chuàng)建自定義的 <label> 和嵌套的 <span> 元素。<label> 通過 for 屬性與按鈕關聯，<span> 用于顯示選中標記。這些元素插入到按鈕前面，同時為按鈕添加 replaced 類名以隱藏它。

綁定 change 事件監(jiān)聽器。當按鈕狀態(tài)變化時，檢查所有 <label> 元素，動態(tài)為選中狀態(tài)對應的 <label> 添加 on 類名，移除未選中的樣式，實現實時狀態(tài)更新。

監(jiān)聽按鈕的 focus 和 blur 事件，分別在按鈕聚焦和失焦時，為 <label> 添加或移除 focus 類名，用于提供視覺上的聚焦提示。

在插件初始化時，遍歷所有 <label>，檢查與其關聯的單選按鈕是否已選中。如果是，則為 <label> 添加 on 類名，確保初始狀態(tài)的樣式同步。最后通過 $('radio').rdo() 應用插件到所有單選按鈕。