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

首先看下html部分

HTML 定義了多個(gè)單選按鈕，每個(gè)按鈕通過 id 和 name 屬性標(biāo)識。<label> 元素的 for 屬性與按鈕的 id 關(guān)聯(lián)，用于提升無障礙性。checked 屬性標(biāo)記默認(rèn)選中的按鈕，確保頁面加載時(shí)有一個(gè)按鈕已選中。

然后是為該dom添加樣式

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

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

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

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

下面編寫js部分

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

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

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

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

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