Custom checkbox in CSS ? | Create a custom checkbox using CSS ?
Q. What is checkbox?
In our websites we use too many input elements for better enhancement of user experience like text, date, radio, etc. and checkbox is also an input tag we use for our websites. we use checkboxes when we want to provide user to verify his option and select multiple data objects and share their all information to us and HTML provides so much simple input tag or if we want an extra tremendous website so we need to create custom checkboxes and provide user a magnificent look of website/web apps so first have a simple HTML checkbox then we go to create our custom.
Basic HTML Checkbox:
Basic Checkbox
HTML Structure of Custom Checkbox:-
<div class="new">
<form>
<div class="form-group">
<input type="checkbox" id="html">
<label for="html">HTML</label>
</div>
<div class="form-group">
<input type="checkbox" id="css">
<label for="css">CSS</label>
</div>
<div class="form-group">
<input type="checkbox" id="javascript">
<label for="javascript">Javascript</label>
</div>
<div class="form-group">
<input type="checkbox" id="react">
<label for="react">React</label>
</div>
</form>
</div>
I think I not need to provide HTML Boilerplate jokes apart lets discuss our code so we just use form, div, label, input:checkbox elements for our custom checkbox and class, id, type, for attributes or we use name tag also when we code for back-end functions and id element is if we want to write a clean code and its not sufficient for our custom checkbox so lets focus on output then go to styling...
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.new {
padding: 50px;
}
.form-group {
display: block;
margin-bottom: 15px;
}
.form-group input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
First we go to style our new div and form-group and input by giving margin, padding, cursor, height, width, display and more... now we go to do our main work lets styles labels... and our inputs are hidden now.
.form-group label {
position: relative;
cursor: pointer;
}
.form-group label:before {
content:'';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid #e94f4f;
box-shadow: 0 1px 2px rgba(228, 8, 8, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 10px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}
.form-group input:checked + label:after {
content: '';
display: block;
position: absolute;
top: 2px;
left: 9px;
width: 6px;
height: 14px;
border: solid #0079bf;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
Here we use border, content, position, content, transform, vertical align or etc. properties give red Colour to border of input and blue for checks, transform the element by rotating 45deg, use box shadow for giving a shade finish.
Final Output...
Type of Checkbox
Standard Checkbox
- Slider
- Toggle
- Disabled
- Read Only
- Indeterminate
Written by Tushar Sharma
Team Code With Random
Helpful
ReplyDeletePost a Comment