如何設定核取方塊控制項的樣式 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這裡有許多您可以用來設定 checkbox 樣式的 CSS 屬性和虛擬類別。本主題說明一些較常使用的屬性和虛擬類別。

您必須知道的事

CSS 提供許多您可以用來設定 HTML 元素樣式的屬性。但是這些屬性的清單很長，需要花費很多時間閱讀。以下是簡短的 CSS 屬性清單，對於設定 checkbox 控制項的樣式特別有用。

background
指定 checkbox 表面的背景。這個範例提供核取方塊漸層背景。

#backgroundExampleCheckbox {
    background: -ms-linear-gradient(green, blue );
}

    <label>
        <input id="backgroundExampleCheckbox" type="checkbox" />Option
    </label>

使用漸層背景的核取方塊

border
指定 checkbox 框線的粗細、線條樣式和色彩。

這個範例提供核取方塊紅色框線。

#borderExampleCheckbox {
    border: 1px solid red;
}

    <label>
        <input id="borderExampleCheckbox" type="checkbox" />Option
    </label>

使用紅色框線的核取方塊

(請注意，這並不是您可使用的所有項目的完整清單。如需所有 CSS 屬性的完整清單，請參閱階層式樣式表參考)。

checkbox 控制項提供的這個虛擬元素可讓您當成選取器來設定控制項特定部分的樣式：

::-ms-check
將一或多個樣式套用到核取方塊的核取記號。

這個範例可讓核取方塊的核取記號變成綠色。

#checkExampleCheckbox::-ms-check {
    color: green;
}

    <label>
        <input id="checkExampleCheckbox" type="checkbox" checked />Option
    </label>

這個控制項支援的下列虛擬類別可讓您當成選取器，在該控制項處於特定狀態時設定其樣式。

:checked
在選取或核取狀態時將樣式套用到 checkbox。
:indeterminate
在不確定狀態時將樣式套用到 checkbox。
:hover
當使用者將游標放在 checkbox 上但並未按一下予以啟用時，將樣式套用到 checkbox。
:active
啟用控制項時將樣式套用到 checkbox 控制項。checkbox 會在使用者按下控制項和釋放控制項的這段時間內啟用。如果使用者按下控制項然後將指標拖曳離開 checkbox，在使用者釋放指標之前控制項仍為啟用。
:focus
當控制項有焦點時將樣式套用到 checkbox 控制項。有多種方法可讓焦點變為 checkbox：
- 使用指標裝置指定 checkbox。
- 使用 TAB 鍵和 Shift+TAB 鍵瀏覽到 checkbox。
- 使用 keyboard shortcut 來選取 checkbox。
:disabled
停用控制項時將樣式套用到 checkbox 控制項。若要停用 checkbox，請將 disabled 屬性新增至其 HTML 或將 JavaScript 中的 disabled 屬性設定成 true。

(如需可以用於結合虛擬類別及其他選取器的不同方式的詳細資訊，請參閱了解 CSS 選取器)。