CSS checkbox style
The checkbox is an HTML attribute used to take input from the user.
1. we are using the ‘~'(sibling combinator). It selects over all elements that are preceded by the previous selector.
Example:
<!DOCTYPE html> <html> <style> .container { display: block; position: relative; padding-left: 35px; margin-bottom: 20px; cursor: pointer; font-size: 25px; } /* Hide the default checkbox */ .container input { visibility: hidden; cursor: pointer; } /* Create a custom checkbox */ .mark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: lightgray; } .container:hover input ~ .mark { background-color: gray; } .container input:checked ~ .mark { background-color: blue; } /* Create the mark/indicator (hidden when not checked) */ .mark:after { content: ""; position: absolute; display: none; } /* Show the mark when checked */ .container input:checked ~ .mark:after { display: block; } /* Style the mark/indicator */ .container .mark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); } </style> <body> <h1>Qualification</h1> <label class="container">MCA <input type="checkbox"> <span class="mark"></span> </label> <label class="container">BCA <input type="checkbox"> <span class="mark"></span> </label> <label class="container">B.TECH <input type="checkbox"> <span class="mark"></span> </label> <label class="container">M.TECH <input type="checkbox" checked="check"> <span class="mark"></span> </label> </body> </html>
OUTPUT:
See the modified checkmark.
Example:
<!DOCTYPE html> <html> <head> <style> .container { display: block; position: relative; padding-left: 45px; margin-bottom: 15px; cursor: pointer; font-size: 20px; } /* Hide the original checkbox */ input[type=checkbox] { visibility: hidden; } /* creating a custom checkbox*/ .mark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: lightgray; } /*background color to be shown when hovering over checkbox */ .container:hover input ~ .mark { background-color: gray; } /*background color to be shown when the checkbox is checked */ .container input:checked ~ .mark { background-color: blue; } /* checkmark to be shown in checkbox */ /* It will not be shown when unchecked */ .mark:after { content: ""; position: absolute; display: none; } /* display checkmark when checked */ .container input:checked ~ .mark:after { display: block; } /* creating a square to be the sign of checkmark */ .container .mark:after { left: 6px; bottom: 6px; width: 6px; height: 6px; border: solid white; border-width: 4px 4px 4px 4px; } </style> </head> <body> <h1>Qualification</h1> <label class="container"> MCA <input type="checkbox"> <span class="mark"></span> </label> <label class="container"> BCA <input type="checkbox"> <span class="mark"></span> </label> <label class="container"> B.TECH <input type="checkbox"> <span class="mark"></span> </label> <label class="container"> M.TECH <input type="checkbox" checked="check"> <span class="mark"></span> </label> </body> </html>
OUTPUT:
The ripple effect, which makes the checkbox more attractive.
Example:
<html> <head> <style> body{ text-align: center; } .check { width: 500px; margin: 50px auto; clear: both; display: block; background-color: #ff9999; border-radius: 4px; } .check::after { clear: both; display: block; content: ""; } .check .checkbox-container { float: left; width: 50%; box-sizing: border-box; text-align:center; padding: 40px 0px; } /* Styling Checkbox Starts */ .checkbox-label { color: white; display: block; position: relative; margin: auto; cursor: pointer; font-size: 22px; line-height: 24px; height: 50px; width: 24px; clear: both; } .checkbox-label input { position: absolute; opacity: 0; cursor: pointer; } .checkbox-label .mark { top:30px; position: absolute; height: 24px; width: 24px; background-color: transparent; border-radius: 5px; transition: all 0.3s ease-in; border: 2px solid white; } .checkbox-label input:checked ~ .mark { background-color: white; border-radius: 5px; transform: rotate(0deg) scale(1); opacity:1; border: 2px solid white; } .checkbox-label .mark::after { position: absolute; content: ""; border-radius: 5px; } .checkbox-label input:checked ~ .mark::after { transform: rotate(45deg) scale(1); left: 8px; top: 3px; width: 6px; height: 12px; border: solid red; border-width: 0 2px 2px 0; border-radius: 0; } /* For Ripple Effect */ .checkbox-label .mark::before { position: absolute; content: ""; border-radius: 10px; border: 5px solid yellow; transform: scale(0); } .checkbox-label input:checked ~ .mark::before { left: -3px; top: -3px; width: 24px; height: 24px; border-radius: 5px; transform: scale(3); opacity:0; transition: all 0.3s ease-out; } </style> </head> <body> <h1>Qualification</h1> <div class="check"> <div class="checkbox-container"> <label class="checkbox-label">MCA <input type="checkbox"> <span class="mark"></span> </label> </div> <div class="checkbox-container"> <label class="checkbox-label">BCA <input type="checkbox"> <span class="mark"></span> </label> </div> <div class="checkbox-container"> <label class="checkbox-label">M.TECH <input type="checkbox"> <span class="mark"></span> </label> </div> <div class="checkbox-container"> <label class="checkbox-label">B.TECH <input type="checkbox" checked="check"> <span class="mark"></span> </label> </div> </div> </body> </html>
OUTPUT: