Hey friends and welcome to another project blogpost. Today we are going to see how to customize HTML checkbox using CSS.
First, let's see the general usage of this project. Generally, checkboxes in HTML are the basic square with a check mark however today we learn how to style it to make it much more better and user friendly.
Now let's see the source codes.
Paste the codes below in your HTML file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!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>Custom Checkbox using CSS Only | CodingPorium</title>
<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>
<style>
@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;
background-color: royalblue;
}
.container{
background-color: white;
width:500px;
padding:30px;
border-radius:5px;
}
.wrapper{
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{
background: royalblue;
border:2px solid #185ADB;
color:white;
}
.submit{
background-color: black;
color:white;
border:none;
border-radius:5px;
padding:10px;
}
</style>
<body>
<div class="container">
<p style="color:black;text-align:center;">Which languages do you know?</p>
<form class="wrapper" action="#">
<div class="checkbox">
<input type="checkbox" name="HTML" id="">
<div class="box">
<i class="fab fa-html5"></i>
<p data-text="HTML">HTML</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="CSS" id="">
<div class="box">
<i class="fab fa-css3-alt"></i>
<p data-text="CSS">CSS</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="JS" id="">
<div class="box">
<i class="fab fa-js-square"></i>
<p data-text="JavaScript">JavaScript</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="PHP" id="">
<div class="box">
<i class="fab fa-php"></i>
<p data-text="PHP">PHP</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="JAVA" id="">
<div class="box">
<i class="fab fa-java"></i>
<p data-text="Java">Java</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="PYTHON" id="">
<div class="box">
<i class="fab fa-python"></i>
<p data-text="Python">Python</p>
</div>
</div>
<input type="submit" class="submit" value="Submit">
</form>
</div>
</body>
</html>
And that's all for this project. Thanks for reading and do subscribe to our YouTube channel to support us.
Till the next one, goodbye!
Post a Comment