如今，構(gòu)建自定義復(fù)選框、單選按鈕和切換開關(guān)完全可行，同時(shí)保持語(yǔ)義化和可訪問(wèn)性。我們甚至不需要一行JavaScript 代碼或額外的HTML 元素！實(shí)際上，最近比過(guò)去更容易了。讓我們來(lái)看看。

最終效果如下：

事情比以前容易多了！

原因是我們終於可以在<input>標(biāo)籤本身的::before和::after偽元素上設(shè)置樣式了。這意味著我們可以保留並設(shè)置<input>的樣式，而不需要任何額外的元素。以前，我們不得不依賴額外的<div>或<code><span></span>來(lái)實(shí)現(xiàn)自定義設(shè)計(jì)。

讓我們看看HTML 代碼

這裡沒(méi)有什麼特別的。我們只需使用這段HTML 代碼即可設(shè)置輸入的樣式：

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

這就是HTML 部分的全部?jī)?nèi)容，當(dāng)然，建議添加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">開關(guān)</label>
<input type="checkbox" id="s1" class="switch">

開始設(shè)置樣式

首先，我們檢查對(duì)appearance: none;的支持，包括它的前綴版本。 appearance屬性是關(guān)鍵，因?yàn)樗荚趶脑刂袆h除瀏覽器的默認(rèn)樣式。如果瀏覽器不支持此屬性，則樣式將不適用，並將顯示默認(rèn)的輸入樣式。這完全沒(méi)問(wèn)題，也是漸進(jìn)增強(qiáng)的一個(gè)很好的例子。

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

就目前而言， appearance仍處?kù)豆ぷ鞑莅鸽A段，但以下是支持情況：

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

桌面端

移動(dòng)端/平板電腦

像鏈接一樣，我們必須考慮表單元素的不同交互狀態(tài)。我們?cè)谠O(shè)置元素樣式時(shí)會(huì)考慮這些狀態(tài)：

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

例如，以下是如何設(shè)置我們的切換輸入樣式、創(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));
}

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

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

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

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

 @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;
  }
}

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

 /* 預(yù)設(shè)值*/
input[type='checkbox'],
input[type='radio'] {
  --active: #275EFE;
  --border: #BBC1E1;
  border: 1px solid var(--bc, var(--border));
}

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

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

為了可訪問(wèn)性，我們應(yīng)該添加自定義焦點(diǎn)樣式。我們刪除了默認(rèn)的輪廓，因?yàn)樗荒芟裎覀冊(cè)O(shè)置樣式的其他內(nèi)容一樣圓角。但是，帶圓角的box-shadow可以創(chuàng)建一個(gè)像輪廓一樣工作的圓角樣式。

 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);
}

也可以對(duì)齊和設(shè)置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)建自定義表單樣式有多麼方便。由於直接在表單輸入上的偽元素，它需要更少的標(biāo)記。由於自定義屬性，它需要更少的樣式切換。並且由於@supports ，它具有相當(dāng)不錯(cuò)的瀏覽器支持。

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