In this article, we will explain to you how to create custom checkbox and radio buttons using CSS. when we create the form that time we take the checkbox and radio buttons. it displays the default style. if you want to change the default style of the checkbox and radio button then you can do it using CSS.
Table of Contents
How To Create a Custom Checkbox
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html> <html> <head> <style> /* Customize the label */ label { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide default checkbox */ label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox container */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #359900; } /* On mouse-over, add a background color */ label:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ label input:checked ~ .checkmark { background-color: #359900; } /* Create the checkmark/circle (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ label input:checked ~ .checkmark:after { display: block; } /* Style the checkmark */ label .checkmark:after { left: 10px; top: 3px; width: 5px; height: 15px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } </style> </head> <body> <h2>Checkbox Example</h2> <label class="input">Apple <input type="checkbox" name="chkFruit" checked /> <span class="checkmark"></span> </label> <label class="input">Mango <input type="checkbox" name="chkFruit" /> <span class="checkmark"></span> </label> <label class="input">Banana <input type="checkbox" name="chkFruit" /> <span class="checkmark"></span> </label> </body> </html> |
How To Create a Custom Radio Button
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!DOCTYPE html> <html> <head> <style> /* Customize the label */ label { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide default checkbox */ label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox container */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #359900; } /* Add border radius for the radio button */ .circle { border-radius: 50%; } /* On mouse-over, add a background color */ label:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ label input:checked ~ .checkmark { background-color: #359900; } /* Create the checkmark/circle (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ label input:checked ~ .checkmark:after { display: block; } /* Style the checkmark */ label .checkmark:after { left: 10px; top: 3px; width: 5px; height: 15px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Style the radio button circle */ label .circle:after { width: 15px; height: 15px; /* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */ border: none; background: white; border-radius: 50%; left: 20%; top: 20%; } </style> </head> <body> <h2>CSS Radio Button Example</h2> <label class="input">BMW <input type="radio" name="rdoBtn" checked> <span class="checkmark circle"></span> </label> <label class="input">Audi <input type="radio" name="rdoBtn"> <span class="checkmark circle"></span> </label> <label class="input">Ferrari <input type="radio" name="rdoBtn"> <span class="checkmark circle"></span> </label> </body> </html> |
If you liked this article then you can also see our demo or download this example.
Please follow and like us:
