How to style checkbox controls (HTML)

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

There's a lot of CSS properties and pseudo-classes that you can use to style a checkbox. This topic describes some of the more commonly used properties and pseudo-classes.

What you need to know

Technologies

Prerequisites

Useful CSS properties

CSS provides a lot of properties that you can use to style HTML elements. But the list of these properties is long and wading through it can be a bit daunting. Here's a short list of the CSS properties that are particularly useful for styling the checkbox control.

  • background
    Specifies the background of the checkbox face. This example gives the check box a gradient background.

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

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

    A checkbox with a gradient background

  • border
    Specifies the thickness, line style, and color of the checkbox border.

    This example gives the check box a red border.

    #borderExampleCheckbox {
    border: 1px solid red;
}

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

    A checkbox with a red border

(Note that this isn't a complete list of everything you can use. For a complete list of all CSS properties, see the Cascading Style Sheets reference.)

Pseudo-elements for styling checkbox controls

The checkbox control provides this pseudo-element that you can use as a selector to style a specific portion of the control:

  • ::-ms-check
    Applies one or more styles to the check box's check mark.

    This example makes a check box's check mark green.

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

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

Pseudo-classes for styling checkbox controls

This control supports the following pseudo-classes that you can use as selectors to style the control when it’s in certain states.

  • :checked
    Applies styles to a checkbox in the selected, or checked, state.

  • :indeterminate
    Applies styles to a checkbox in the indeterminate state.

  • :hover
    Applies styles to a checkbox when the user places the cursor over the checkbox but has not activated it by clicking.

  • :active
    Applies styles to a checkbox control when the control is active. The checkbox is active between the time the user presses the control and releases the control. If the user presses the control and drags the pointer off the checkbox, the control is still active until the user releases the pointer.

  • :focus
    Applies styles to a checkbox control when the control has focus. There are several ways to give focus to a checkbox:

  • :disabled
    Applies styles to a checkbox control when the control is disabled. To disable a checkbox, add the disabled attribute to its HTML or set the disabled property to true in JavaScript.

(For more info about the different ways you can combine pseudo-classes and other selectors, see Understanding CSS selectors.)

HTML essential controls sample

Quickstart: Adding checkbox controls

Guidelines and checklist for checkbox controls