Custom Checkbox using CSS only

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Custom Form Elements</title>
  <!-- using google font -->
  <link href=",500" rel="stylesheet">
  <!-- importing reset and main css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">

  <div class="container">
    <!-- custom checkbox -->
    <div class="holder">
      <h2>Custom Checkbox</h2>
      <form action="#" class="customCheckbox">
        <div class="row">
          <p>Which programming language do you want to learn?</p>
        <div class="row">
          <input type="checkbox" id="javascript" checked>
          <label for="javascript">Javascript</label>
        <div class="row">
          <input type="checkbox" id="php">
          <label for="php">PHP</label>
        <div class="row">
          <input type="checkbox" id="python">
          <label for="python">Python</label>
        <div class="row">
          <input type="checkbox" id="dotnet">
          <label for="dotnet">.Net</label>
        <div class="row">
          <input type="checkbox" id="node">
          <label for="node">Node JS</label>


CSS Code (main.css)
/* general */

body {
  font: 300 18px/1.5 'Roboto', sans-serif;
  color: #333;
  background: url('../images/bg.jpg') no-repeat;
  background-size: cover;

.container {
  max-width: 640px;
  margin: 50px auto;
  padding: 35px;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 10px;

.holder {
  border-bottom: 1px dashed #ccc;
  padding: 0 0 30px;
  margin: 0 0 30px;

.row {
  margin: 0 0 15px;

h2 {
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 20px;

/* custom checkbox */

.customCheckbox input[type="checkbox"] {
  position: absolute;
  left: -9999px;

.customCheckbox input[type="checkbox"]+label {
  position: relative;
  padding: 3px 0 0 40px;
  cursor: pointer;

.customCheckbox input[type="checkbox"]+label:before {
  content: '';
  background: #fff;
  border: 2px solid #1cbe9d;
  border-radius: 3px;
  height: 25px;
  width: 25px;
  position: absolute;
  top: 0;
  left: 0;

.customCheckbox input[type="checkbox"]+label:after {
  content: '';
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-color: transparent transparent #1cbe9d #1cbe9d;
  width: 15px;
  height: 8px;
  position: absolute;
  top: 6px;
  left: 5px;
  opacity: 0;
  transform: scale(2) rotate(-45deg);
  transition: transform 0.3s linear, opacity 0.3s linear;

.customCheckbox input[type="checkbox"]:checked+label:after {
  opacity: 1;
  transform: scale(1) rotate(-45deg);

CSS Code (reset.css)
   v2.0 | 20110126
   License: none (public domain)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
html {
 box-sizing: border-box;

*, *:before, *:after {
 box-sizing: inherit;

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
body {
 line-height: 1;
ol, ul {
 list-style: none;
blockquote, q {
 quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
table {
 border-collapse: collapse;
 border-spacing: 0;

Share this

Related Posts