ADVERTISEMENT

Create Custom Checkbox Using HTML and CSS

Telegram Group Join Now

ADVERTISEMENT

Create Custom Checkbox Using HTML and CSS

 

ADVERTISEMENT

Custom Checkbox Using HTML and CSS
Custom Checkbox Using HTML and CSS

ADVERTISEMENT

 

 

Hello, guys welcome to the Codewithrandom blog, Today we learn How to Create a Custom Checkbox Using Html and Css Code. We learn topics like how to style a custom checkbox and types of checkboxes like toggle, disabled, read-only, and many more things about checkboxes.

ADVERTISEMENT

Q. What is a Checkbox?

In our websites we use too many input elements for better enhancement of user experiences like text, date, radio, etc. and a checkbox is also an input tag we use for our websites.

ADVERTISEMENT

we use checkboxes when we want to provide users to verify their options and select multiple data objects and share their all information with us HTML provides so many simple input tags or if we want an extra tremendous website so we need to create custom checkboxes and provide the 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 Code:

Custom Checkbox Using HTML and CSS
Custom Checkbox Using HTML and CSS
Basic Checkbox 

 

ADVERTISEMENT

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 did not need to provide HTML Boilerplate jokes apart let’s discuss our code so we just use the 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 let’s focus on output then go to styling…

5+ HTML CSS Projects With Source Code

Output…

ADVERTISEMENT

Custom Checkbox Using HTML and CSS
Custom Checkbox Using HTML and CSS
Our HTML Output 

Styling of Our Custom Checkbox:-

*,
*: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.

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

Output…

Custom Checkbox Using HTML and CSS
Custom Checkbox Using HTML and CSS
CSS Output

 

Final Styling of Our Custom Checkbox:-

.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 to give red Colour to the border of input and blue for checks, transform the element by rotating 45deg, and use box shadow for giving a shaded finish.

Restaurant Website Using HTML And CSS With Source Code

ADVERTISEMENT

Final Output…

ADVERTISEMENT

Custom Checkbox Using HTML and CSS
Custom Checkbox Using HTML and CSS
Custom Checkbox
 

 

ADVERTISEMENT

Type of Checkbox

  1. Standard Checkbox
  2. Slider
  3. Toggle
  4. Disabled
  5. Read Only
  6. Indeterminate

Hope you like this post and enjoy it. If we did any mistake please comment on it so this help full for also our users. Thank you for reading.

ADVERTISEMENT

Written by Tushar Sharma
Team Code With Random

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

1 thought on “Create Custom Checkbox Using HTML and CSS”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT