Trending September 2023 # Guide To 2 Types Of Checkboxes In Css With Examples # Suggested October 2023 # Top 18 Popular

You are reading the article Guide To 2 Types Of Checkboxes In Css With Examples updated in September 2023 on the website Speedmintonvn.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Guide To 2 Types Of Checkboxes In Css With Examples

Introduction to Checkbox CSS

Real-Time Example: Suppose the particular question has four options in an examination. In that, more questions if more than two options are correct. If we take the general radio button, we can select at a time only one option, but that is not the case. We must select more than two options at a time and use the checkbox to achieve this requirement.

Advantages

More than one option can be selected by using the checkbox.

Types of Checkboxes

There are two types of Checkboxes in CSS

Default checkboxes

Custom checkboxes

1. Default checkboxes

The default checkbox is not required to add any additional styles. CSS libraries, by default, provided some styles for this checkbox.

Syntax:

2. Custom checkboxes

This Custom checkbox must require adding additional styles because this is a user-required checkbox, so they have to provide CSS styles based on their requirement.

Syntax:

CSS Styles /* topClass class styles*/ .topClass { display: block; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; padding-left: 35px; margin-bottom: 12px; } /* Hidden the default check box*/ .topClass input { position: absolute; cursor: pointer; height: 0; width: 0; opacity: 0; } /* creating user custom contentMark */ .contentMark { position: absolute; height: 25px; width: 25px; background-color: #eee; top: 0; left: 0; } /* when hover the mouse green color will be added */ .topClass:hover input ~ . contentMark { background-color: green; } /* When the checkbox is checked, add a blue background */ .toClass input:checked ~ . contentMark { background-color: blue; } /* create checkmark, initially hidden if we not check*/ .contentMark:after { position: absolute; display: none; content: “”; } /* checked and showed if we check the box */ .topClass input:checked ~ . contentMark:after { display: block; } /*It styles the contentMark class indicator */ .topClass. contentMark:after { left: 9px; top: 5px; width: 5px; -ms-transform: rotate(45deg); border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); height: 10px; border: solid white; }

HTML Code:

Examples of Checkbox CSS

Here are the following examples:

Example #1

Code:

h1 { color: green; text-align: center; } h2 { color:blue; } label { color: brown; font-size: 18px; }

Output:

Example #2

Custom checkbox with Question and Answer:

Code:

h1 { color: green; text-align: center; } h2 { color: blue; } label { color: brown; font-size: 18px; } /* The labelClass */ .labelClass { display: block; position: relative; padding-left: 36px; margin-bottom: 13px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; font-size: 23px; } /* Hide the browser’s default checkbox */ .labelClass input { position: absolute; height: 0; width: 0; opacity: 0; cursor: pointer; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; height: 24px; width : 24px; background-color : pink; left: 0; width: 24px; background-color: pink; } /* On mouse-over, add a grey background color */ .labelClass:hover input ~ .checkmark { background-color: gray; } /* When the checkbox is checked, add a blue background */ .labelClass input:checked ~ .checkmark { background-color: brown; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: “”; position: absolute; display: none; } /* Show the checkmark when checked */ .labelClass input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .labelClass .checkmark:after { left: 10px; top: 6px; -webkit-transform: rotate(46deg); -ms-transform : rotate( 46deg); transform : rotate( 46deg); width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; -ms-transform: rotate(46deg); transform: rotate(46deg); }

Output:

Explanation: Example 1 has no styles, whereas in Example 2, we have a Custom checkbox with styles that make the font and checkbox beautiful.

Example #3

Auto Select Items

Code:

h1 { color: fuchsia; text-align: center; } h2 { color: brown; } label { color: green; font-size: 18px; } /* The labelClass */ .labelClass { display: block; position: relative; padding-left: 36px; margin-bottom: 13px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; font-size: 23px; } /* Hide the browser’s default checkbox */ .labelClass input { position: absolute; height: 0; width: 0; opacity: 0; cursor: pointer; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; height: 24px; width : 24px; background-color : orange; left: 0; width: 24px; background-color: navy; } /* On mouse-over, add a grey background color */ .labelClass:hover input ~ .checkmark { background-color: gray; } /* When the checkbox is checked, add a blue background */ .labelClass input:checked ~ .checkmark { background-color: brown; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: “”; position: absolute; display: none; } /* Show the checkmark when checked */ .labelClass input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .labelClass .checkmark:after { left: 10px; top: 6px; -webkit-transform: rotate(46deg); -ms-transform : rotate( 46deg); transform : rotate( 46deg); width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; -ms-transform: rotate(46deg); transform: rotate(46deg); }

Output:

Conclusion

CSS checkbox can be created by using default styles and custom styles. The default checkbox does not have a rich GUI, whereas the custom checkbox has a rich GUI. You can select multiple items at a time in the checkbox. Initially, we can also auto-check any choice number of checkboxes.