使用 CSS 為核取方塊設定樣式

本教程將介紹一種在 CSS 中設定核取方塊樣式的方法。

使用 CSS 設定核取方塊樣式

核取方塊是一個 HTML 元素，用於接受使用者的輸入，幾乎在所有網站中都使用。既然瀏覽器提供的預設核取方塊在所有其他站點上看起來都一樣，為什麼不設定它們的樣式呢？儘管使用 :before、:after、:hover 和 :checked 等偽元素設定它們的樣式有點複雜，但可以使用 CSS 設定核取方塊的樣式。

要將樣式應用到核取方塊，我們將僅使用 HTML 和 CSS，沒有其他庫。這種方法在現代瀏覽器中執行良好。在樣式化核取方塊方面可以有很多方法。我們可以遵循這些簡單的原則來實現我們的目標。我們可以隱藏預設的核取方塊控制元件，該控制元件由瀏覽器設定樣式，無法使用 CSS 以任何有意義的方式覆蓋。隱藏控制元件後，我們仍然需要檢測並切換其選中狀態。我們可以通過為新元素設定樣式來反映核取方塊的選中狀態。

上述原則可以使用不同的方法來應用，並且沒有單一的正確或錯誤方法。在本教程中，我們將首先將核取方塊包裝在 div 元素中。這意味著即使核取方塊控制元件被隱藏，我們仍然可以通過單擊 div 內的任意位置來切換其選中狀態。然後，我們可以隱藏核取方塊並在核取方塊後新增一個新元素，我們可以相應地設定樣式。該元素必須出現在核取方塊之後才能根據 :checked 狀態進行選擇和設定樣式。CSS 中的偽類用於設定特定元素的樣式，定義元素的特定狀態。這裡我們使用了一些偽元素。:before 選擇器在每個選定元素的內容之前插入一些內容。:checked 選擇器匹配每個選中的 <input> 元素。

在 HTML 中，核取方塊位於 <label> 標籤內。<span> 元素的主要功能是稍後從 CSS 中引用核取方塊。
在 CSS 中，display 屬性指定元素的顯示行為（渲染框的型別）。在我們的例子中，它被設定為 none，這將完全刪除 <label> 標籤內的 <input> 元素，即我們的預設核取方塊。我們使用 height、width 和 border 屬性來生成自定義核取方塊。CSS height 和 width 屬性設定元素的高度和寬度。border CSS 屬性允許指定元素邊框的樣式、寬度和顏色。display 屬性指定顯示行為。內聯值會將元素顯示為內聯。position 屬性指定用於設定新核取方塊的元素的定位型別。

:before 偽元素用於在 <span> 元素之前插入我們的內容。:checked 選擇器匹配每個被選中的元素，這意味著當我們的核取方塊被選中時，新的內容將被注入元素 <span> 之前，因為我們使用的是 :before 選擇器。這些支援 content 屬性，它允許注入 Unicode 圖示。CSS 屬性 content:'\2714' 的值表示一個複選標記圖示。

示例程式碼：

<label>
    <input type='checkbox'>
    <span></span>
    Click Me
</label>

label input {
    display: none; 
}

label span {
    height: 10px;
    width: 10px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    top: -5px;
    left: 0;
}