如今，構建自定義復選框、單選按鈕和切換開關完全可行，同時保持語義化和可訪問性。我們甚至不需要一行 JavaScript 代碼或額外的 HTML 元素！實際上，最近比過去更容易了。讓我們來看看。

最終效果如下：

事情比以前容易多了！

原因是我們終于可以在 <input> 標簽本身的 ::before 和 ::after 偽元素上設置樣式了。這意味著我們可以保留并設置 <input> 的樣式，而不需要任何額外的元素。以前，我們不得不依賴額外的 <div> 或 <code><span></span> 來實現(xiàn)自定義設計。

讓我們看看 HTML 代碼

這里沒有什么特別的。我們只需使用這段 HTML 代碼即可設置輸入的樣式：

<input type="checkbox" id="c1">
<input type="radio" id="r1">
<input type="checkbox" id="s1">

這就是 HTML 部分的全部內容，當然，建議添加 name 和 id 屬性，以及匹配的 <label></label> 元素：

<label for="c1">復選框</label>
<input type="checkbox" id="c1">

<label for="r1">單選按鈕</label>
<input type="radio" id="r1">

<label for="s1">開關</label>
<input type="checkbox" id="s1" class="switch">

開始設置樣式

首先，我們檢查對 appearance: none; 的支持，包括它的前綴版本。appearance 屬性是關鍵，因為它旨在從元素中刪除瀏覽器的默認樣式。如果瀏覽器不支持此屬性，則樣式將不適用，并將顯示默認的輸入樣式。這完全沒問題，也是漸進增強的一個很好的例子。

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

就目前而言，appearance 仍處于工作草案階段，但以下是支持情況：

此瀏覽器支持數(shù)據來自 Caniuse，其中包含更多詳細信息。數(shù)字表示瀏覽器在該版本及更高版本中支持此功能。

桌面端

移動端/平板電腦

像鏈接一樣，我們必須考慮表單元素的不同交互狀態(tài)。我們在設置元素樣式時會考慮這些狀態(tài)：

• :checked
• :hover
• :focus
• :disabled

例如，以下是如何設置我們的切換輸入樣式、創(chuàng)建旋鈕以及考慮 :checked 狀態(tài)：

/* 切換容器 */
.switch {
  width: 38px;
  border-radius: 11px;
}

/* 切換旋鈕 */
.switch::after {
  left: 2px;
  top: 2px;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: var(--ab, var(--border));
  transform: translateX(var(--x, 0));
}

/* 選中時更改顏色和位置 */
.switch:checked {
  --ab: var(--active-inner);
  --x: 17px;
}

/* 當輸入被禁用時，降低切換旋鈕的不透明度 */
.switch:disabled:not(:checked)::after {
  opacity: .6;
}

我們將 <input> 元素用作容器。輸入內部的旋鈕是用 ::after 偽元素創(chuàng)建的。同樣，不再需要額外的標記！

如果您打開演示中的樣式，您會看到我們正在定義一些 CSS 自定義屬性，因為這已成為在樣式表中管理可重用值的一種很好的方法：

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .25);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
  }
}

但是我們使用自定義屬性還有另一個原因——它們非常適合根據元素的狀態(tài)更新值！我們這里不會詳細介紹，但以下是如何根據不同狀態(tài)使用自定義屬性的示例。

/* 默認值 */
input[type='checkbox'],
input[type='radio'] {
  --active: #275EFE;
  --border: #BBC1E1;
  border: 1px solid var(--bc, var(--border));
}

/* 重寫默認值 */
input[type='checkbox']:checked,
input[type='radio']:checked {
  --b: var(--active);
  --bc: var(--active);
}

/* 如果未選中且未禁用，則在懸停時應用另一種邊框顏色 */
input[type='checkbox']:not(:checked):not(:disabled):hover,
input[type='radio']:not(:checked):not(:disabled):hover {
  --bc: var(--border-hover);
}

為了可訪問性，我們應該添加自定義焦點樣式。我們刪除了默認的輪廓，因為它不能像我們設置樣式的其他內容一樣圓角。但是，帶圓角的 box-shadow 可以創(chuàng)建一個像輪廓一樣工作的圓角樣式。

input[type='checkbox'],
input[type='radio'] {
  --focus: 2px rgba(39, 94, 254, .25);
  outline: none;
  transition: box-shadow .2s;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  box-shadow: 0 0 0 var(--focus);
}

也可以對齊和設置 HTML 中直接跟隨 <input> 元素的 <label></label> 元素的樣式：

<label for="c1">復選框</label>
<input type="checkbox" id="c1">

input[type='checkbox']   label,
input[type='radio']   label {
  display: inline-block;
  vertical-align: top;
  /* 其他樣式 */
}

input[type='checkbox']:disabled   label,
input[type='radio']:disabled   label {
  cursor: not-allowed;
}

再次展示演示：

希望您能看到如今創(chuàng)建自定義表單樣式有多么方便。由于直接在表單輸入上的偽元素，它需要更少的標記。由于自定義屬性，它需要更少的樣式切換。并且由于 @supports，它具有相當不錯的瀏覽器支持。

總而言之，這比我們過去不得不處理的開發(fā)體驗要好得多！