利用Label標籤訂製個性化Radio按鈕

在最近的項目中，遇到了相似下圖的單選按鈕。

Radio 按鈕的默認樣式並很差看，常常成爲被修改樣式的對象。而經常使用的 antd 中，Radio 組件也沒有提供可用於自定義的屬性。固然，這些是難不倒各位前端小夥伴的，只要利用好 label 標籤就能很簡單地實現一個個性化 Radio 按鈕組件。

CSS3 目前基本都獲得了支持，因此配合 CSS3 就能減小咱們在 JS 上的處理。這一次主要涉及以下知識點：

• label 標籤的使用
• :checked 僞類的使用
• ::before/after 僞元素的使用

實際完成的效果以下圖（因爲偷懶，不少就用文字代替了）：

想看代碼的小夥伴也能夠來這裏：利用 Label 定製個性化 Radio 按鈕

整個 Radio 的核心思想，就是利用 label 與 radio 的互相關聯。這樣在點擊 label 的時候，radio 按鈕也會跟着聯動。label 與表單控件的關聯分爲顯示和隱式兩種。顯示即咱們熟悉的 for 屬性關聯表單控件的 id，而隱式則是把表單控件包裹在 label 標籤中。在咱們的例子中，採用的是隱式關聯的方法。

<label class="label-wrapper" style={labelStyle} onChange={handleChange}>
  <input type="radio" id={id} name={name} value={value} /> // 輔助的 div 在例子裏面用來顯示邊框等自定義樣式 <div>{content}</div> </label>
複製代碼

爲了方便對樣式的控制，咱們須要調整一下 label 的默認樣式。

.label-wrapper {
  display: block;
  position: relative;
}
複製代碼

下一步就是利用到 :checked 僞類，來控制選中和非選中的樣式。對應咱們的例子，就是 input 下面的 div 的樣式。而對於簡單的圖案，如邊框、右上角的選中標示，其實還能夠利用 ::before/after 僞元素來實現。

input:checked + div {
  // 經過 padding 解決抖動問題
  padding: 0;
  position: relative;
  border-radius: 10px;
  border: 5px solid lightblue;

  &::after {
    content: "@";
    color: #fff;
    position: absolute;
    top: -10px;
    right: 1px;
  }

  &::before {
    content: "";
    width: 0px;
    height: 0px;
    border: 15px solid lightblue;
    border-left-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
  }
}
複製代碼

如此一來，一個簡單的自定義 Radio 按鈕就實現出來了。根據需求咱們能夠監聽 onChange 事件等來實現咱們想要的功能。另外，只要利用 radio 相同 name 就會互斥的性質，就能實現按鈕組的效果。

最後再提一下，想看代碼的小夥伴也能夠來這裏：利用 Label 定製個性化 Radio 按鈕

總結：

這一次利用 CSS 僞類來實現自定義 Radio 按鈕，主要是受到最近刷題中 CSS 題目的啓發。雖然如今前端的重點在 JavaScript 上，但 HTML 與 CSS 仍然是逃不開的內容。CSS3 提供了許多僞類和新的屬性，利用好僞類能夠減小咱們在 JavaScript 上的工做量。因此在空閒之時不妨多翻兩眼 CSS3 吧。