DEV Community

Cover image for Custom Checkbox using HTML and CSS
Piyush | Coding Torque
Piyush | Coding Torque

Posted on

Custom Checkbox using HTML and CSS

#css #javascript #webdev #beginners

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Custom Checkbox using HTML and CSS. This will be a step-by-step guide. Let's get started 🚀.

Get more projects of web development on codingtorque.com

Step 1: Import Fontawesome CDN

Import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons on a website.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />
Enter fullscreen mode Exit fullscreen mode

Step 2: Import Google Fonts

Import the fonts using Google Fonts API. Below is the code for the Poppins Font. Paste the below code in the <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

Step 3: HTML Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Custom radio button using css - @code.scientist x @codingtorque</title>

</head>

<body>
    <div class="container">
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-youtube"></i>
                <p>YouTube</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-facebook-f"></i>
                <p>Facebook</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-instagram"></i>
                <p>Instagram</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-telegram"></i>
                <p>Telegram</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-twitter"></i>
                <p>Twitter</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-github"></i>
                <p>GitHub</p>
            </div>
        </div>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Output Till Now

Custom Checkbox using HTML and CSS

Step 4: CSS Code 

@import url("https://fonts.googleapis.com/css2?family=Poppins");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 500px;
    margin-top: 10rem;
}

.checkbox {
    height: 40px;
    width: 160px;
    position: relative;
    margin: 5px;
}

.checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border: 2px solid gainsboro;
    border-radius: 10px;
}

.box i {
    margin-right: 4px;
}

.checkbox input:checked~.box {
    border-color: deeppink;
    color: deeppink;
}
Enter fullscreen mode Exit fullscreen mode

Output Till Now

Custom Checkbox using HTML and CSS

Top comments (0)