自訂選項按鈕 (radio) 樣式

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

作法如下:

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

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

預設圖片
Eric Chuang
正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124