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

首先看下html部分

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

然后是為該dom添加樣式

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

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

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

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

下面編寫js部分

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

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

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

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

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