customize Checkboxes
CSS / HTML

How to customize Checkboxes using CSS

customize Checkboxes

Hi, Today we will learn how to customize checkboxes using CSS. We will make tab like checkboxes which will check uncheck as it is in above image.

The HTML Part: First we will create a checkbox and give it an id. Don’t skip this because we will use the same id with the checkbox’s label. Now create a label and add a for attribute with the checkbox id value.

<input type="checkbox" id="option1">
<label for="option1">My Label</label>

The CSS Part: Now we need to write CSS to customize checkboxes. So first we hide the checkbox with display: none.

input[type="checkbox"]{
   display: none;
}

Then we will give a tab shape to our checkbox’s label with the following CSS and give a hover effect to the label.

label{
   border: 1px solid #e8e8e8;
   padding: 10px;
   border-radius: 50px;
   cursor: pointer;
}
label:hover{
   background-color: lightgreen;
}

Now with the following CSS our checkbox which has become a tab now, will highlight when you click on it.

input[type="checkbox"]:checked + label{
   background-color: lightgreen;
   color: #333;
   border: 1px solid green;
}

Thanks for visiting.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

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