如何设置复选框控件的样式 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

有很多 CSS 属性和伪类，你可以用来设置 checkbox 样式。本主题介绍了一些更常用的属性和伪类。

你需要了解的内容

CSS 提供很多属性，你可以用来设置 HTML 元素的样式。但这些属性列表较长，因而不适合在此全部讨论。下面是对设置 checkbox 控件样式特别有用的 CSS 属性的简短列表。

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 选择器。）