自訂選項按鈕 (radio) 樣式

表單元素非常依賴瀏覽器的定義，因此像是選項按鈕 (radio)、核取方塊 (checkbox) 與下拉式選單 (select) 的樣式在設定樣式時，便時常會需要依賴虛擬元素 (pseudo element)。

作法如下：

See the Pen Customized Radio by Eric Chuang (@eric-chuang) on CodePen.

概念上是在選項按鈕上，用 position: absolute 覆蓋上一層圖層，並針對該圖層設定樣式。這種作法很有可能在不同瀏覽器會有不同的結果，因為瀏覽器預設的選項按鈕起始位置會有 1 到 2 像素 (px) 的差異，因此需要透過 top 與 left 調整自訂圖層的位置。