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

Subodh Adhikari 2023年2月20日 2021年10月2日
使用 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> 元素,即我們的預設核取方塊。我們使用 heightwidthborder 屬性來生成自定義核取方塊。CSS heightwidth 屬性設定元素的高度和寬度。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;
}