Emoji Checkbox using HTML and CSS

This HTML element is generally used on every website, but without styling them, they look similar on every website. So, styling them will make our site different and attractive. We have to hide the original checkbox in order to style the checkbox. Styling the checkboxes using CSS is an interesting and creative task, which will provide a new and attractive look to the default checkbox.

Styling of the checkbox will be clear by using some illustrations

See also  Expanding Hamburger Menu With Pure CSS

Create an HTML file named ‘index.html‘ and put these codes given here below.

HTML 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>Emoji Checkbox</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="check">
        <input id="check" type="checkbox">
        <label for="check"></label>
    </div>
</body>
</html>

Create a CSS file named ‘main.css‘ and put these codes.

CSS Code:

:root { font-size: 100px; }

body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	background:  #804694;
}

.check {
	position: relative;
	background: linear-gradient(90deg,#753a88, #cc2b5e);
	line-height: 0;
	perspective: 400px;
}

.check input[type="checkbox"],
.check label,
.check label::before,
.check label::after,
.check {
	appearance: none;
	display: inline-block;
	border-radius: 1rem;
	border: 0;
	transition: .35s ease-in-out;
	box-sizing: border-box;
	cursor: pointer;
}

.check label {
	width: 2.2rem;
	height: 1rem;
	background: #d7d7d7;
	overflow: hidden;
}

.check input[type="checkbox"] {
	position: absolute;
	z-index: 1;
	width: .8rem;
	height: .8rem;
	top: .1rem;
	left: .1rem;
	background: linear-gradient(45deg, #dedede, #ffffff);
	box-shadow: 0 6px 7px #0000004d;
	outline: none;
}

.check input[type="checkbox"]:checked {
	left: 1.3rem;
}

.check input[type="checkbox"]:checked + label {
	background: transparent;
}

.check label::before,
.check label::after {
	content: "· ·";
	position: absolute;
	overflow: hidden;
	left: .15rem;
	top: .5rem;
	height: 1rem;
	letter-spacing: -.04rem;
	color: #9b9b9b;
	font-family: "Times New Roman", serif;
	z-index: 2;
	font-size: .6rem;
	border-radius: 0;
	transform-origin: 0 0 -.5rem;
	backface-visibility: hidden;
}

.check label::after {
	content: "●";
	top: .65rem;
	left: .3rem;
	height: .1rem;
	width: .35rem;
	font-size: .2rem;
	transform-origin: 0 0 -.4rem;
}

.check input[type="checkbox"]:checked + label::before,
.check input[type="checkbox"]:checked + label::after {
	left: 1.55rem;
	top: .4rem;
	line-height: .1rem;
	transform: rotateY(360deg);
}

.check input[type="checkbox"]:checked + label::after {
	height: .16rem;
	top: .55rem;
	left: 1.6rem;
	font-size: .6rem;
	line-height: 0;
}

Leave a Reply

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