How to style checkbox controls (HTML)

Applies to Windows and Windows Phone

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.)

Related topics

HTML essential controls sample
Quickstart: Adding checkbox controls
Guidelines and checklist for checkbox controls

 

 

Show:
© 2014 Microsoft