以前需透過label標籤配合css “+” selector來自訂checkbox與radio button的樣式,但現在已可透過將input設定 appearance: none 來將input視為一個普通的容器,更直覺地自訂radio button與checbox的外觀。以下是我們要完成的樣子:

看看實際的結果

我們的目標是以不同底色來區分不同狀態,紅色底色代表未選取 (off),綠色為已選取 (on),灰色是disabled。第三個淺綠色的checkbox是未確定狀態 (indeterminate) 的checkbox。並且給予不同的圖形來幫助識別不同的狀態。最後再以動態串連圖形變化。可以先點上方連結看看效果。

我們先來為input設定最重要的css property: appearance: none ,然後checkbox或radio button會變成一個普通的容器,就像一個普通的inline容器一樣,可以設定display: inline-block 讓他成為一個可指定寬高的容器。然後便可以開始設定padding, 背景色等等。

至於圖像的部分,我們則可以用:before偽元素來在input內添加圖像。我們用borderborder-radius屬性,讓它在off/on狀態顯示類似0與1的圖像。

input有三個偽類也需要我們來處理一下:

:checked 代表已選取的狀態,:disabled也就是input標籤為disabled狀態,:indeterminate則代表checkbox獨有的不確定狀態。將對應的顏色分別設置完畢後,便完成一個獨特的radio button與checkbox ui囉!

以下是上方範例的程式碼: