Example 1:
Consider the example where HTML checkbox is styled using CSS. First three check-boxes are created and then the default check-boxes are hide and new checkbox is created using height and width attribute. Set the height and width attribute to 25px and initial background color to black. The check-mark is also styled manually by using webkit. “:checked” is used to style checkbox after it is checked. When the user clicks the checkbox, the background color is set to green.
<!DOCTYPE html> <html> <head> <style> .main { display: block; position: relative; padding-left: 45px; margin-bottom: 15px; cursor: pointer; font-size: 20px; } /* Hide the default checkbox */ input[type=checkbox] { visibility: hidden; } /* Creating a custom checkbox based on demand */ .geekmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #efebeb; } /* Specify the background color to be shown when hovering over checkbox */ .main:hover input ~ .geekmark { background-color: yellow; } /* Specify the background color to be shown when checkbox is active */ .main input:active ~ .geekmark { background-color: #d92424; } /* Specify the background color to be shown when checkbox is checked */ .main input:checked ~ .geekmark { background-color: #e2b617; } /* Checkmark to be shown in checkbox */ /* It is not be shown when not checked */ .geekmark:after { content: ""; position: absolute; display: none; } /* Display checkmark when checked */ .main input:checked ~ .geekmark:after { display: block; } /* Styling the checkmark using webkit */ /* Rotated the rectangle by 45 degree and showing only two border to make it look like a tickmark */ .main .geekmark:after { left: 8px; bottom: 5px; width: 6px; height: 12px; border: solid white; border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } </style> </head> <body> <h1 style="color:#e30f72;"> Best Web Designing Platform </h1> <label class="main">CodeX <input type="checkbox"> <span class="geekmark"></span> </label> <label class="main">Code Y <input type="checkbox" checked="checked"> <span class="geekmark"></span> </label> <label class="main">CodeZ <input type="checkbox"> <span class="geekmark"></span> </label> </body> </html>
<!DOCTYPE html> <html> <head> <title> Style a checkbox using CSS </title> <style> .script { display: block; position: relative; padding-left: 45px; margin-bottom: 15px; cursor: pointer; font-size: 20px; } /* Hide the default checkbox */ input[type=checkbox] { visibility: hidden; } /* creating a custom checkbox based on demand */ .geekmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #ddf508; } /* specify the background color to be shown when hovering over checkbox */ .script:hover input ~ .geekmark { background-color: yellow; } /* specify the background color to be shown when checkbox is active */ .script input:active ~ .geekmark { background-color: red; } /* specify the background color to be shown when checkbox is checked */ .script input:checked ~ .geekmark { background-color: #27aa8f; } /* checkmark to be shown in checkbox */ /* It is not be shown when not checked */ .geekmark:after { content: ""; position: absolute; display: none; } /* display checkmark when checked */ .script input:checked ~ .geekmark:after { display: block; } /* styling the checkmark using webkit */ /* creating a square to be the sign of checkmark */ .script .geekmark:after { left: 6px; bottom: 5px; width: 6px; height: 6px; border: solid white; border-width: 4px 4px 4px 4px; } h1{ color: #f6910a; } </style> </head> <body> <h1>Is BAJARANGI SOFT Useful?</h1> <label class="script" style = "color:green;"> Yes <input type="checkbox"> <span class="geekmark"></span> </label> <label class="script" style = "color:green;"> Absolutely Yes <input type="checkbox" checked="checked"> <span class="geekmark"></span> </label> </body> </html>