CSS Technique: Style Checkboxes And Radio Buttons
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 thetype="checkbox"
ortype="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+.
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
- Demonstration: CSS Technique: Style Checkboxes And Radio Buttons Technique 1 Toggle Background Color Checkbox/Radio Button (learnwebcoding.com).
- CodePen: CSS Technique: Style Checkboxes And Radio Buttons Technique 1 Toggle Background Color Checkbox/Radio Button (codepen.io/learnwebcoding/).
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 thetype="checkbox"
attribute, and thelabel
andspan
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. Theinput
element with thetype="checkbox"
attribute is referred to as an HTML checkbox. The<span></span>
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<span></span>
in<label></label>
before and/or after the<label></label>
tag content. Nesting<span></span>
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 thename
attribute with or without thevalue
attribute. To default check/pre-check a checkbox, use thechecked="checked"
attribute. - Radio buttons use the
input
element with thetype="radio"
andname
attributes, and thelabel
andspan
elements. Radio buttons with the samename
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. Theinput
element with thetype="radio"
attribute is referred to as an HTML radio button. The<span></span>
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<span></span>
in<label></label>
before and/or after the<label></label>
tag content. Nesting<span></span>
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 thevalue
attribute. To default check/pre-check a radio button, use thechecked="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 thetype="checkbox"
ortype="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 siblinginput
elements with thetype="checkbox"
ortype="radio"
attribute that are descendants oflabel
elements. In other words, selects thespan
elements that follow HTML checkboxes/radio buttons nested inlabel
elements. In this example, the selectedspan
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 isbox-sizing: content-box
. Accordingly, this example is designed forbox-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 bybox-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. Ifbox-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 independentbox-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 inheritedfont-size
,line-height
, andfont-family
property values. For example, in some cases changing line 11vertical-align: top
tovertical-align: middle
and line 15margin-top
tomargin-bottom
might work better cross-browser. Therefore, depending upon your code, it might be worth trying various line 11vertical-align
property values with various line 15margin-bottom
ormargin-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 thetype="checkbox"
andchecked="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 theinput
element with thetype="radio"
andchecked="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<span></span>
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 thebackground-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 thebackground-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
- Demonstration: CSS Technique: Style Checkboxes And Radio Buttons Technique 2 Toggle Color HTML Character Entity (learnwebcoding.com).
- CodePen: CSS Technique: Style Checkboxes And Radio Buttons Technique 2 Toggle Color HTML Character Entity (codepen.io/learnwebcoding/).
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>✓</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 2 toggle color HTML character entity HTML source code notes:
- Checkboxes use the
input
element with thetype="checkbox"
attribute, thelabel
element, and<span></span>
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. Theinput
element with thetype="checkbox"
attribute is referred to as an HTML checkbox. The<span>✓</span>
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<span>✓</span>
in<label></label>
before and/or after the<label></label>
tag content. Nesting<span>✓</span>
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 thename
attribute with or without thevalue
attribute. To default check/pre-check a checkbox, use thechecked="checked"
attribute. - Radio buttons use the
input
element with thetype="radio"
andname
attributes, thelabel
element, and<span></span>
tags containing the HTML character numeric entity (●) for the black circle (●) character. Radio buttons with the samename
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. Theinput
element with thetype="radio"
attribute is referred to as an HTML radio button. The<span>●</span>
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<span>●</span>
in<label></label>
before and/or after the<label></label>
tag content. Nesting<span>●</span>
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 thevalue
attribute. To default check/pre-check a radio button, use thechecked="checked"
attribute.The black circle (●) character should probably be named the filled circle character because its color can be changed with the CSScolor
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 thetype="checkbox"
ortype="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 siblinginput
elements with thetype="checkbox"
ortype="radio"
attribute that are descendants oflabel
elements. In other words, selects thespan
elements that follow HTML checkboxes/radio buttons nested inlabel
elements. In this example, the selectedspan
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 9width
property value and the line 10height
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 9width
property value, the line 10height
property value, and the line 12font-size
property value, but it is not required. - Line 15: The HTML code for the CSS checkbox/radio button object is either
<span>✓</span>
, which contains the HTML character numeric entity for the check mark (✓) character, or<span>●</span>
, which contains the HTML character numeric entity for the black circle (●) character. Applies thecolor: 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 isbox-sizing: content-box
. Accordingly, this example is designed forbox-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 bybox-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. Ifbox-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 independentbox-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 inheritedfont-size
,line-height
, andfont-family
property values. For example, in some cases changing line 11vertical-align: top
tovertical-align: middle
and line 20margin-top
tomargin-bottom
might work better cross-browser. Therefore, depending upon your code, it might be worth trying various line 11vertical-align
property values with various line 20margin-bottom
ormargin-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 thetype="checkbox"
andchecked="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 theinput
element with thetype="radio"
andchecked="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<span>✓</span>
HTML code and the CSS radio button<span>●</span>
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 thecolor: 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 thecolor: 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.