How to Create CheckBox by CSS and HTML

css and html

Hello:
Today I am given the basic coding of CSS and HTML for the creating checkbox for your website.
Megvilla will give you all the necessary details for creating this.

First you need to write HTML codes

<input type=”Checkbox” id=”sam”>
<label for=”sam”>&#9776</label>

<p> Checkbox is checked</p>

Then write CSS coding

input{
display: none;
}

p{
display: none;
opactity: 0;
}

input:checked ~ p{
display: block;
}

label{
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #3b5998;
text-align: center;
font-size: 24px;
color: #fff;
border-radius: 50px;
}

Result of your Checkbox Coding

checkbox

More creative coding, you can visit in https://codepen.io/ and check the profile of Nike-Instu.

These code are taken from Niko-Instu‘s Codepen profile by his authority.

If you are a programmer or a web designer then you can also create profile on codepen.io and then you can create your own styles with live preview.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Leave a comment

Your email address will not be published. Required fields are marked *