CSS Technique: Style Checkboxes And Radio Buttons

Last reviewed/updated: 22 Mar 2018 | Published: 20 Jul 2015 | Status: Active

1. Introduction

Checkboxes and radio buttons present style conscious web developers with two primary problems. First, web browsers differ with respect to how they style checkboxes and radio buttons. Second, certain properties of the checkboxes and the radio buttons, themselves, cannot be styled with CSS. As a result, using common CSS styles, it is impossible to style checkboxes and radio buttons identically cross-browser. This has prompted style conscious web developers to develop a clever CSS based technique/workaround for creating checkboxes and radio buttons that are styled identically cross-browser.

In short, this technique:

Creates traditional checkboxes/radio buttons using the HTML input element with the type="checkbox" or type="radio" attribute. In this example, these checkboxes/radio buttons are referred to as HTML checkboxes/radio buttons.
Associates a label with the HTML checkboxes/radio buttons using the HTML label element. The label extends the clickable area of the HTML checkbox/radio button to include the HTML checkbox/radio button <label></label> tag content.
Hides the HTML checkboxes/radio buttons using the CSS display:none style. Although hidden, the web browser still keeps track of the state (i.e., the checked or unchecked status) of the HTML checkboxes/radio buttons, and clicks on the HTML checkbox/radio button <label></label> tag content still toggles their state.
Creates checkbox/radio button objects that are styled with CSS to look and behave identically cross-browser. In this example, these checkbox/radio button objects are referred to as CSS checkboxes/radio buttons.
Detects default checked/pre-checked HTML checkbox/radio buttons, and detects clicks on HTML checkbox/radio button <label></label> tag content, using the CSS :checked pseudo-class selector.
Responds to default checked/pre-checked HTML checkbox/radio buttons, and responds to clicks on the HTML checkbox/radio button <label></label> tag content, by styling the CSS checkboxes/radio buttons in some way to indicate their state. The first technique toggles the background color of the CSS checkboxes/radio buttons. The second technique toggles the color of the check mark (✓) and black circle (●) HTML character numeric entities inside the CSS checkboxes/radio buttons, respectively.

The most popular methods for creating the CSS checkboxes/radio buttons use image sprites and/or the CSS :before pseudo-element. In this example: 1.) an image sprite is not required; instead, CSS with or without HTML character numeric entities is used; and 2.) the CSS checkboxes/radio buttons can be placed both before and/or after the HTML checkbox/radio button <label></label> tag content without requiring any additional CSS code, which is impossible using the CSS :before pseudo-element. Lastly, this example associates the labels with the HTML checkboxes/radio buttons implicitly (i.e., by nesting), not explicitly (i.e., by the id and for attributes), which reduces the amount of HTML code.

1.1. Web Browser Support

Web browser support: IE9+, ED12+, FF4+, SF5+, CH13+, OP11.60+.

The web browser support for technique 1 toggle background color checkbox/radio button and technique 2 toggle color HTML character numeric entity is the same.

1.2. How To Try These Examples On Your Computer

To try these examples on your computer:

Download the following source files to the same drive or folder on your computer:
Double click the .html files.

1.3. Abbreviations

IE = Internet Explorer.
ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
FF = Firefox.
SF = Safari.
CH = Chrome.
OP = Opera.

2. Technique 1 Toggle Background Color Checkbox/Radio Button

Technique 1 toggle background color checkbox/radio button toggles the background color of the CSS checkboxes/radio buttons.

2.1. Technique 1 Toggle Background Color Checkbox/Radio Button Demonstration And CodePen

2.2. Technique 1 Toggle Background Color Checkbox/Radio Button HTML Source Code And Notes

HTML source code: style_checkboxes_radio_buttons_technique_1.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>CSS Technique: Style Checkboxes And Radio Buttons Technique 1 Toggle Background Color Checkbox/Radio Button</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="style_checkboxes_radio_buttons_technique_1.css" />
 </head>
 <body>
  <h2>CSS Technique: Style Checkboxes And Radio Buttons Technique 1 Toggle Background Color Checkbox/Radio Button</h2>
  <p>
   <label><input type="checkbox" name="unique to indicate checkbox1, if checked, when form submitted" /><span></span> Checkbox</label><br />
   <label><input type="checkbox" name="unique to indicate checkbox2, if checked, when form submitted" checked="checked" /><span></span> Checkbox default checked/pre-checked</label><br />
   <label><input type="checkbox" name="unique to indicate checkbox3, if checked, when form submitted" />Checkbox <span></span></label>
  </p>
  <p>
   <label><input type="radio" name="creates radio button group and indicates radio button group1 when form submitted" value="unique to indicate value1, if checked, when form submitted" /><span></span> Radio button</label><br />
   <label><input type="radio" name="creates radio button group and indicates radio button group1 when form submitted" value="unique to indicate value2, if checked, when form submitted" checked="checked" /><span></span> Radio button default checked/pre-checked</label><br />
   <label><input type="radio" name="creates radio button group and indicates radio button group1 when form submitted" value="unique to indicate value3, if checked, when form submitted" />Radio button <span></span></label>
  </p>
  <p>Web browser support: IE9+, ED12+, FF4+, SF5+, CH13+, OP11.60+.</p>
 </body>
</html>

Technique 1 toggle background color checkbox/radio button HTML source code notes:

Checkboxes use the input element with the type="checkbox" attribute, and the label and span elements. The checkbox HTML is nested in <label></label> tags. The label extends the clickable area of the checkbox to include the <label></label> tag content. The input element with the type="checkbox" attribute is referred to as an HTML checkbox. The  code is styled with CSS to become what is referred to as a CSS checkbox. To place the CSS checkbox before and/or after the <label></label> tag content, nest  in <label></label> before and/or after the <label></label> tag content. Nesting  in <label></label> includes the CSS checkbox as part of the clickable <label></label> tag content. If the checkbox data is to be sent when a form is submitted, use the name attribute with or without the value attribute. To default check/pre-check a checkbox, use the checked="checked" attribute.
Radio buttons use the input element with the type="radio" and name attributes, and the label and span elements. Radio buttons with the same name attribute value form a radio button group. The radio button HTML is nested in <label></label> tags. The label extends the clickable area of the radio button to include the <label></label> tag content. The input element with the type="radio" attribute is referred to as an HTML radio button. The  code is styled with CSS to become what is referred to as a CSS radio button. To place the CSS radio button before and/or after the <label></label> tag content, nest  in <label></label> before and/or after the <label></label> tag content. Nesting  in <label></label> includes the CSS radio button as part of the clickable <label></label> tag content. If the radio button group data is to be sent when a form is submitted, use the value attribute. To default check/pre-check a radio button, use the checked="checked" attribute.

2.3. Technique 1 Toggle Background Color Checkbox/Radio Button CSS Source Code And Notes

CSS source code: style_checkboxes_radio_buttons_technique_1.css (learnwebcoding.com):

body {
  line-height: 1.5;
}
input[type="checkbox"], input[type="radio"] {
  display: none;
}
label input[type="checkbox"] ~ span, label input[type="radio"] ~ span {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: top;
  border: 2px solid #999;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  margin-top: 3px;
}
label input[type="checkbox"] ~ span {
  border-radius: 2px;
}
label input[type="radio"] ~ span {
  border-radius: 12px;
}
label input[type="checkbox"]:checked ~ span, label input[type="radio"]:checked ~ span {
  background-color: #000;
}
label:hover input[type="checkbox"] ~ span, label:hover input[type="radio"] ~ span {
  border-color: #666;
}

Technique 1 toggle background color checkbox/radio button CSS source code notes:

Lines 1 - 3: Styles the example with the commonly used line-height: 1.5 style. The checkboxes/radio buttons inherit this style.
Lines 4 - 6: Hides the checkboxes/radio buttons that use the HTML input element with the type="checkbox" or type="radio" attribute. In this example, these checkboxes/radio buttons are referred to as HTML checkboxes/radio buttons. Hides the HTML checkboxes/radio buttons.
To display both the HTML checkboxes/radio buttons and the CSS checkboxes/radio buttons, delete or comment out line 5.
Line 7: Selects span elements that are preceded by general sibling input elements with the type="checkbox" or type="radio"attribute that are descendants of label elements. In other words, selects the span elements that follow HTML checkboxes/radio buttons nested in label elements. In this example, the selected span elements are styled with CSS to become what are referred to as CSS checkboxes/radio buttons. Selects the CSS checkbox/radio button objects.
Using the general sibling selector (~) instead of the more commonly used adjacent sibling selector (+) allows markup (i.e., tags) to be included in the <label></label> tag content. It also changes the web browser support from CH4+ and OP10.50+ to CH13+ and OP11.60+.
Lines 7 - 16: Styles the CSS checkbox/radio button objects into generic CSS checkbox/radio button objects. By default, the generic CSS checkbox/radio button objects are in the unchecked state.
Line 13: Overrides box-sizing: border-box; that is, if it is present/inherited. The W3C recommended initial style and the typical user agent style is box-sizing: content-box. Accordingly, this example is designed for box-sizing: content-box. box-sizing: content-box places padding and border outside the content box, which draws the CSS checkbox/radio buttons in the intended expanded state. Increasingly, however, and particularly in environments where a grid system is being used, the user agent style is being overridden by box-sizing: border-box, typically as * { box-sizing: border-box }. box-sizing: border-box places padding and border inside the content box, which draws the CSS checkbox/radio buttons in an unintended collapsed state. If box-sizing: border-box is not inherited, then can likely delete this line, but keeping it does no harm. In other words, depending on your environment, this line might not be required.
Line 14: Overrides -moz-box-sizing: border-box; that is, if it is present/inherited. The oldest supported versions of FF support the web browser vendor prefix -moz-box-sizing style property, not the W3C recommended web browser vendor independent box-sizing CSS property. In other words, similar to line 13 above, but for the oldest supported versions of FF.
Line 15: Vertically aligns the checkboxes/radio buttons with the <label></label> tag content.
The vertical alignment of the checkboxes/radio buttons with the <label></label> tag content is dependent upon many variables, including any inherited font-size, line-height, and font-family property values. For example, in some cases changing line 11 vertical-align: top to vertical-align: middle and line 15 margin-top to margin-bottom might work better cross-browser. Therefore, depending upon your code, it might be worth trying various line 11 vertical-align property values with various line 15 margin-bottom or margin-top property values in order achieve the most satisfactory cross-browser alignment.
Lines 17 - 19: Styles the generic CSS checkbox/radio button objects into CSS checkboxes.
Lines 20 - 22: Styles the generic CSS checkbox/radio button objects into CSS radio buttons.
Line 23: Detects default checked/pre-checked HTML checkbox/radio buttons. Although the HTML checkboxes/radio buttons are hidden by CSS source code lines 4 - 6, the web browser still keeps track of the state of the HTML checkboxes/radio buttons. Default checked/pre-checked checkboxes use the input element with the type="checkbox" and checked="checked" attributes. When the web page loads, input[type="checkbox"]:checked detects default checked/pre-checked checkboxes on the DOM. Default checked/pre-checked radio buttons use the input element with the type="radio" and checked="checked" attributes. When the web page loads, input[type="radio"]:checked detects default checked/pre-checked radio buttons on the DOM.
Line 23: Detects clicks on the HTML checkbox/radio button <label></label> tag content. Although the HTML checkboxes/radio buttons are hidden by CSS source code lines 4 - 6, the web browser still keeps track of the state of the HTML checkboxes/radio buttons, and clicks on the HTML checkbox/radio button <label></label> tag content still toggles their state. Nesting the CSS checkbox/radio button  HTML code in the HTML checkbox/radio button <label></label> tags includes the CSS checkboxes/radio buttons as part of the clickable HTML checkbox/radio button <label></label> tag content.
Technically, the CSS checkboxes/radio buttons are never actually clicked, nor is there any mechanism directly associated with the CSS checkboxes/radio buttons to detect or respond to clicks. Instead, everything happens on, and through, the <label></label> tag content associated with the hidden HTML checkboxes/radio buttons. The CSS source code reflects this.
Lines 23 - 25: Responds to default checked/pre-checked HTML checkbox/radio buttons, and responds to clicks on the HTML checkbox/radio button <label></label> tag content, by applying the background-color: #000 style to the CSS checkbox/radio button. This changes the CSS checkbox/radio button background color to black, which indicates that the CSS checkbox/radio button is in the checked state.
When an HTML checkbox/radio button is changed from the checked to the unchecked state, the web browser removes the checked flag from the CSS checkbox/radio button object on the DOM, which removes the background-color: #000 style. This reverts the CSS checkbox/radio button to the default style, which indicates that the CSS checkbox/radio button is in the unchecked state.
Lines 26 - 28: Optional. Styles the CSS checkboxes/radio buttons with a hover style.

3. Technique 2 Toggle Color HTML Character Entity

Technique 2 toggle color HTML character entity toggles the color of the check mark (✓) and black circle (●) HTML character numeric entities inside the CSS checkboxes/radio buttons, respectively.

3.1. Technique 2 Toggle Color HTML Character Entity Demonstration And CodePen

3.2. Technique 2 Toggle Color HTML Character Entity HTML Source Code And Notes

HTML source code: style_checkboxes_radio_buttons_technique_2.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>CSS Technique: Style Checkboxes And Radio Buttons Technique 2 Toggle Color HTML Character Entity</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="style_checkboxes_radio_buttons_technique_2.css" />
 </head>
 <body>
  <h2>CSS Technique: Style Checkboxes And Radio Buttons Technique 2 Toggle Color HTML Character Entity</h2>
  <p>
   <label><input type="checkbox" name="unique to indicate checkbox1, if checked, when form submitted" /><span>&#10003;</span> Checkbox</label><br />
   <label><input type="checkbox" name="unique to indicate checkbox2, if checked, when form submitted" checked="checked" /><span>&#10003;</span> Checkbox default checked/pre-checked</label><br />
   <label><input type="checkbox" name="unique to indicate checkbox3, if checked, when form submitted" />Checkbox <span>&#10003;</span></label>
  </p>
  <p>
   <label><input type="radio" name="creates radio button group and indicates radio button group1 when form submitted" value="unique to indicate value1, if checked, when form submitted" /><span>&#9679;</span> Radio button</label><br />
   <label><input type="radio" name="creates radio button group and indicates radio button group1 when form submitted" value="unique to indicate value2, if checked, when form submitted" checked="checked" /><span>&#9679;</span> Radio button default checked/pre-checked</label><br />
   <label><input type="radio" name="creates radio button group and indicates radio button group1 when form submitted" value="unique to indicate value3, if checked, when form submitted" />Radio button <span>&#9679;</span></label>
  </p>
  <p>Web browser support: IE9+, ED12+, FF4+, SF5+, CH13+, OP11.60+.</p>
 </body>
</html>

Technique 2 toggle color HTML character entity HTML source code notes:

Checkboxes use the input element with the type="checkbox" attribute, the label element, and  tags containing the HTML character numeric entity (✓) for the check mark (✓) character. The checkbox HTML is nested in <label></label> tags. The label extends the clickable area of the checkbox to include the <label></label> tag content. The input element with the type="checkbox" attribute is referred to as an HTML checkbox. The ✓ code is styled with CSS to become what is referred to as a CSS checkbox. To place the CSS checkbox before and/or after the <label></label> tag content, nest ✓ in <label></label> before and/or after the <label></label> tag content. Nesting ✓ in <label></label> includes the CSS checkbox as part of the clickable <label></label> tag content. If the checkbox data is to be sent when a form is submitted, use the name attribute with or without the value attribute. To default check/pre-check a checkbox, use the checked="checked" attribute.
Radio buttons use the input element with the type="radio" and name attributes, the label element, and  tags containing the HTML character numeric entity (●) for the black circle (●) character. Radio buttons with the same name attribute value form a radio button group. The radio button HTML is nested in <label></label> tags. The label extends the clickable area of the radio button to include the <label></label> tag content. The input element with the type="radio" attribute is referred to as an HTML radio button. The ● code is styled with CSS to become what is referred to as a CSS radio button. To place the CSS radio button before and/or after the <label></label> tag content, nest ● in <label></label> before and/or after the <label></label> tag content. Nesting ● in <label></label> includes the CSS radio button as part of the clickable <label></label> tag content. If the radio button group data is to be sent when a form is submitted, use the value attribute. To default check/pre-check a radio button, use the checked="checked" attribute.
The black circle (●) character should probably be named the filled circle character because its color can be changed with the CSS color property as shown (●).

3.3. Technique 2 Toggle Color HTML Character Entity CSS Source Code And Notes

CSS source code: style_checkboxes_radio_buttons_technique_2.css (learnwebcoding.com):

body {
  line-height: 1.5;
}
input[type="checkbox"], input[type="radio"] {
  display: none;
}
label input[type="checkbox"] ~ span, label input[type="radio"] ~ span {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: top;
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
  color: transparent;
  text-align: center;
  border: 2px solid #999;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  margin-top: 3px;
}
label input[type="checkbox"] ~ span {
  border-radius: 2px;
}
label input[type="radio"] ~ span {
  border-radius: 12px;
}
label input[type="checkbox"]:checked ~ span, label input[type="radio"]:checked ~ span {
  color: inherit;
}
label:hover input[type="checkbox"] ~ span, label:hover input[type="radio"] ~ span {
  border-color: #666;
  cursor: default;
}

Technique 2 toggle color HTML character entity CSS source code notes:

Lines 1 - 3: Styles the example with the commonly used line-height: 1.5 style. The checkboxes/radio buttons inherit this style.
Lines 4 - 6: Hides the checkboxes/radio buttons that use the HTML input element with the type="checkbox" or type="radio" attribute. In this example, these checkboxes/radio buttons are referred to as HTML checkboxes/radio buttons. Hides the HTML checkboxes/radio buttons.
To display both the HTML checkboxes/radio buttons and the CSS checkboxes/radio buttons, delete or comment out line 5.
Line 7: Selects span elements that are preceded by general sibling input elements with the type="checkbox" or type="radio"attribute that are descendants of label elements. In other words, selects the span elements that follow HTML checkboxes/radio buttons nested in label elements. In this example, the selected span elements are styled with CSS to become what are referred to as CSS checkboxes/radio buttons. Selects the CSS checkbox/radio button objects.
Using the general sibling selector (~) instead of the more commonly used adjacent sibling selector (+) allows markup (i.e., tags) to be included in the <label></label> tag content. It also changes the web browser support from CH4+ and OP10.50+ to CH13+ and OP11.60+.
Lines 7 - 20: Styles the CSS checkbox/radio button objects into generic CSS checkbox/radio button objects. By default, the generic CSS checkbox/radio button objects are in the unchecked state.
Lines 9 - 10: Sets the width and height of the CSS checkbox/radio button.
Line 12: Sets the size of the CSS checkbox check mark character and the CSS radio button black circle character. It is recommended that the line 12 font-size property value is the same as the line 9 width property value and the line 10 height property value, but it is not required.
Line 14: Sets the vertical position of the check mark character in the CSS checkbox and the black circle character in the CSS radio button. It is recommended that the line 14 line-height property value is the same as the line 9 width property value, the line 10 height property value, and the line 12 font-size property value, but it is not required.
Line 15: The HTML code for the CSS checkbox/radio button object is either ✓, which contains the HTML character numeric entity for the check mark (✓) character, or ●, which contains the HTML character numeric entity for the black circle (●) character. Applies the color: transparent style to the CSS checkbox/radio button check mark/black circle characters. This makes the check mark/black circle characters invisible, which indicates that, by default, the generic CSS checkbox/radio button objects are in the unchecked state.
Line 18: Overrides box-sizing: border-box; that is, if it is present/inherited. The W3C recommended initial style and the typical user agent style is box-sizing: content-box. Accordingly, this example is designed for box-sizing: content-box. box-sizing: content-box places padding and border outside the content box, which draws the CSS checkbox/radio buttons in the intended expanded state. Increasingly, however, and particularly in environments where a grid system is being used, the user agent style is being overridden by box-sizing: border-box, typically as * { box-sizing: border-box }. box-sizing: border-box places padding and border inside the content box, which draws the CSS checkbox/radio buttons in an unintended collapsed state. If box-sizing: border-box is not inherited, then can likely delete this line, but keeping it does no harm. In other words, depending on your environment, this line might not be required.
Line 19: Overrides -moz-box-sizing: border-box; that is, if it is present/inherited. The oldest supported versions of FF support the web browser vendor prefix -moz-box-sizing style property, not the W3C recommended web browser vendor independent box-sizing CSS property. In other words, similar to line 18 above, but for the oldest supported versions of FF.
Line 20: Vertically aligns the checkboxes/radio buttons with the <label></label> tag content.
The vertical alignment of the checkboxes/radio buttons with the <label></label> tag content is dependent upon many variables, including any inherited font-size, line-height, and font-family property values. For example, in some cases changing line 11 vertical-align: top to vertical-align: middle and line 20 margin-top to margin-bottom might work better cross-browser. Therefore, depending upon your code, it might be worth trying various line 11 vertical-align property values with various line 20 margin-bottom or margin-top property values in order achieve the most satisfactory cross-browser alignment.
Lines 22 - 24: Styles the generic CSS checkbox/radio button objects into CSS checkboxes.
Lines 25 - 27: Styles the generic CSS checkbox/radio button objects into CSS radio buttons.
Line 28: Detects default checked/pre-checked HTML checkbox/radio buttons. Although the HTML checkboxes/radio buttons are hidden by CSS source code lines 4 - 6, the web browser still keeps track of the state of the HTML checkboxes/radio buttons. Default checked/pre-checked checkboxes use the input element with the type="checkbox" and checked="checked" attributes. When the web page loads, input[type="checkbox"]:checked detects default checked/pre-checked checkboxes on the DOM. Default checked/pre-checked radio buttons use the input element with the type="radio" and checked="checked" attributes. When the web page loads, input[type="radio"]:checked detects default checked/pre-checked radio buttons on the DOM.
Line 28: Detects clicks on the HTML checkbox/radio button <label></label> tag content. Although the HTML checkboxes/radio buttons are hidden by CSS source code lines 4 - 6, the web browser still keeps track of the state of the HTML checkboxes/radio buttons, and clicks on the HTML checkbox/radio button <label></label> tag content still toggles their state. Nesting the CSS checkbox ✓ HTML code and the CSS radio button ● HTML code in the HTML checkbox/radio button <label></label> tags includes the CSS checkboxes/radio buttons as part of the clickable HTML checkbox/radio button <label></label> tag content.
Technically, the CSS checkboxes/radio buttons are never actually clicked, nor is there any mechanism directly associated with the CSS checkboxes/radio buttons to detect or respond to clicks. Instead, everything happens on, and through, the <label></label> tag content associated with the hidden HTML checkboxes/radio buttons. The CSS source code reflects this.
Lines 28 - 30: Responds to default checked/pre-checked HTML checkbox/radio buttons, and responds to clicks on the HTML checkbox/radio button <label></label> tag content, by applying the color: inherit style to the CSS checkbox/radio button check mark/black circle characters. This makes the check mark/black circle characters visible, which indicates that the CSS checkbox/radio button is in the checked state.
When an HTML checkbox/radio button is changed from the checked to the unchecked state, the web browser removes the checked flag from the CSS checkbox/radio button object on the DOM, which removes the color: inherit style. This reverts the check mark/black circle character to the default style, which indicates that the CSS checkbox/radio button is in the unchecked state.
Lines 31 - 34: Optional. Styles the CSS checkboxes/radio buttons with hover styles.
Line 33: Prevents the IE11 and ED12+ cursor from changing into the text shape on hover over the CSS checkboxes/radio buttons, themselves.