How to style checkbox controls (HTML)
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.
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.
Specifies the background of the checkbox face. This example gives the check box a gradient background.
Specifies the thickness, line style, and color of the checkbox border.
This example gives the check box 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.)
The checkbox control provides this pseudo-element that you can use as a selector to style a specific portion of the control:
Applies one or more styles to the check box's check mark.
This example makes a check box's check mark green.
This control supports the following pseudo-classes that you can use as selectors to style the control when it’s in certain states.
Applies styles to a checkbox in the selected, or checked, state.
Applies styles to a checkbox in the indeterminate state.
Applies styles to a checkbox when the user places the cursor over the checkbox but has not activated it by clicking.
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.
Applies styles to a checkbox control when the control has focus. There are several ways to give focus to a checkbox:
(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