JQuery統一複寫美化專案中所有radio單選按鈕樣式
阿新 • • 發佈：2020-12-12
#### 老專案要升級改版，對於分散在各頁面的樣式不好處理，怕有遺漏，尤其是優化input表單，修改其預設樣式，接下來，我將給大家分享一下，我在專案中的總結。
**效果**
#### 上程式碼：
2.簡單搞一搞 HTML, 男男女女
```
```
## 3.開整 ~~~~
#### 首先分析一下實現思路：
- 定義一個JQuery的擴充套件方法，頁面載入完畢，input radio迴圈呼叫
- 建立一個新的Div，並設定類名，用於定義css
- 使用輸入的ID得到相關的標籤，將input radio及對應的id的label，放進上述Div中
- 繫結自定義事件，觸發它，繫結點選，焦點等事件
``
1.簡單搞一搞 CSS，此處程式碼有摺疊，Click Me~
.custom-radio { float: left; } .custom-radio input { position: absolute; left: -9999px; vertical-align: middle; } .custom-radio label { cursor: pointer; padding-right: 20px; line-height: 30px; padding-left: 25px; position: relative; display: inline-block; } .custom-radio label:hover { color: #FF6200; } .custom-radio label::after { content: ''; display: block; position: absolute; top: 6px; left: 0; width: 16px; height: 16px; outline: 0; border: 1px solid #D5D5D5; border-radius: 50%; } .custom-radio label.checked::after { border: 6px solid #FF6200; width: 6px; height: 6px; } .custom-radio label, .custom-radio label.checked { border: none; background: none; }