Custom Checkbox Css Code | Custom Checkbox Using Html Css

Custom Checkbox Css Code | Custom Checkbox Using Html Css

Welcome to Code With Random blog. In this blog, we learn that how how to create custom checkbox css. We use HTML & CSS  for this custom checkbox css. Hope you enjoy our blog so let’s start with a basic HTML structure for custom checkbox css.

HTML code for custom checkbox

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Checkbox</title>  
   <link rel="stylesheet" href="style.css">  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />  
 </head>  
 <body>  
   <p>Choose your favorites</p>  
   <div class="container">  
     <div class="checkbox">  
       <input type="checkbox" name="" id="">  
       <div class="box">  
         <i class="fab fa-instagram"></i>  
         <p data-text="Instagram">Instagram</p>  
       </div>  
     </div>  
     <div class="checkbox">  
       <input type="checkbox" name="" id="">  
       <div class="box">  
         <i class="fab fa-facebook-square"></i>  
         <p data-text="facebook">facebook</p>  
       </div>  
     </div>  
     <div class="checkbox">  
       <input type="checkbox" name="" id="">  
       <div class="box">  
         <i class="fab fa-twitter"></i>  
         <p data-text="Twitter">Twitter</p>  
       </div>  
     </div>  
     <div class="checkbox">  
       <input type="checkbox" name="" id="">  
       <div class="box">  
         <i class="fab fa-whatsapp"></i>  
         <p data-text="Whats App">Whats App</p>  
       </div>  
     </div>  
     <div class="checkbox">  
       <input type="checkbox" name="" id="">  
       <div class="box">  
         <i class="fab fa-github"></i>  
         <p data-text="Github">Github</p>  
       </div>  
     </div>  
     <div class="checkbox">  
       <input type="checkbox" name="" id="">  
       <div class="box">  
         <i class="fab fa-discord"></i>  
         <p data-text="Discord">Discord</p>  
       </div>  
     </div>  
   </div>  
 </body>  
 </html>  

There is all HTML code for the custom checkbox css. Now, you can see output without CSS, then we write CSS for our custom checkbox css.

Output

 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');  
 *{  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
   font-family: 'Poppins', sans-serif;  
 }  
 body{  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   height: 100vh;  
   flex-direction: column;  
 }  
 .container{  
   width: 450px;  
   display: flex;  
   justify-content: space-between;  
   flex-wrap: wrap;  
   margin: 1em 0 0 0;  
 }  
 .checkbox{  
   width: 140px;  
   height: 40px;  
   position: relative;  
   margin: 0.5em 0;  
 }  
 .checkbox input{  
   position: absolute;  
   cursor: pointer;  
   width: 100%;  
   height: 100%;  
   z-index: 2;  
   appearance: none;  
   -webkit-appearance: none;  
 }  
 .box{  
   width: 100%;  
   height: 100%;  
   position: absolute;  
   z-index: 1;  
   background: #f7f7f7;    
   border: 2px solid #d1d1d1;  
   color: rgb(63, 63, 63);  
   border-radius: 5px;  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   overflow: hidden;  
   transition: all 0.6s;  
 }  
 .box i{  
   margin-right: 0.3em;  
 }  
 .box p{  
   transition: all 0.2s;  
 }  
 .checkbox input:checked ~ .box p{  
   transform: translateY(-30px);  
 }  
 .box p::before{  
   content: attr(data-text);  
   position: absolute;  
   transform: translateY(30px);  
 }  
 .checkbox input:checked ~ .box p::before{  
   transform: translateY(30px);  
 }  
 .checkbox input:checked ~ .box {  
   background: #f7f7f7;  
   border: 2px solid #185ADB;  
   color: #185ADB;  
 }  

Now we have completed our CSS section,  Here is our updated output CSS

 

Hope you like the custom checkbox, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

In this post, we learn how to create a custom checkbox using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3. Notes App Using Html Css Javascript

Share on:

Leave a Comment