---
title: "Custom Checkbox using CSS"  
description: "In this blog, I have described how to create custom checkbox using css only or pure css.  You can create webpage more attractive using this stylish ch"  
author: "AVADHESH PATEL"  
published: 2013-02-26  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/455/custom-checkbox-using-css  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# Custom Checkbox using CSS

In this [blog](https://www.mindstick.com/articles/12705/myths-and-misconception-about-blog), I have described how to create [custom checkbox](https://www.mindstick.com/forum/614/custom-checkbox-not-working-with-model-popup) using [css](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) only or pure css. You can create webpage more attractive using this stylish checkbox. Most beautiful point of this custom checkbox is, it supported by all [latest](https://www.mindstick.com/articles/23264/some-of-the-latest-digital-marketing-trends) browsers version. Because this checkbox made by css only, hence it is [light](https://www.mindstick.com/news/1842/daylight-reproduces-more-accurately-by-the-leds-smart-lighting-system-based-on-quantum-dots) weighted and work [fast](https://www.mindstick.com/articles/12289/build-your-store-the-fast-way-with-magento-2-frontend-builder) loaded. Steps are given below.\

##### Step 1: CSS of custom checkbox.

```
<style type="text/css">        /*  size(width and height) of  main checkbox */ .ckbox        {            width: 25px;            height: 25px;        }        /*  position of main custome checkbox   */

.custom-checkbox        {            position: relative;            display: inline-block;        }        /*  craete custom checkbox in place of actual checkbox */

.custom-checkbox > .box        {            position: relative;            display: block;            width: 25px;            height: 25px; /* set custom checkbox background color    */            background-color: #E5E5E5;            padding: 0px;            margin: 0px;        }        /*  check sign position, color, width and height    */

.custom-checkbox > .box > .tick        {            position: absolute;            left: 4px;            top: 7px;            width: 14px;            height: 6px;       /*  set check sign width */            border-bottom: 4px solid #000;            border-left: 4px solid #000;            -webkit-transform: rotate(-45deg);            -moz-transform: rotate(-45deg);            -o-transform: rotate(-45deg);            -ms-transform: rotate(-45deg);            transform: rotate(-45deg);            display: none;        }        /*  input checked unchecked action    */

.custom-checkbox > input:checked + .box > .tick        {            display: block;        }        /*  input checked unchecked position and width and height    */

.custom-checkbox > input        {            position: absolute;            outline: none;            left: 0;            top: 0;            padding: 0;            width: 25px;            height: 25px;            border: none;            margin: 0;            opacity: 0;            z-index: 1;        }

    </style>
```

##### Step 2: Create custom checkbox as below using above css class

```
<span class="custom-checkbox">        <input type="checkbox" id="chkPermission" class="ckbox" />            <span class="box">                <span class="tick"></span>            </span>

    </span>
```

[Figure](https://yourviews.mindstick.com/view/87536/what-are-ghosts-jobs-and-how-to-figure-out-them):

![Custom Checkbox using CSS](https://www.mindstick.com/blogs/ea65ec56-6bcb-4ff3-9386-45aa9b4d9475/images/5820a6cf-b207-4b4b-b8d3-b50e82255d9f.jpg)

##### Step 3: If you want to checkbox with description then use as below line of

##### code

```
<span class="custom-checkbox">        <input type="checkbox" id="chkPermission" class="ckbox" />        <span class="box"><span class="tick"></span></span></span>
<span style="vertical-align: super;">Permission</span>
```

##### Figure:

![Custom Checkbox using CSS](https://www.mindstick.com/blogs/ea65ec56-6bcb-4ff3-9386-45aa9b4d9475/images/0152cfd9-d965-4b34-858b-0a57209a26c7.jpg) \

##### Step 4: If you want to checked checkbox on checkbox’s description click

##### then line of code as below

```
<span class="custom-checkbox">        <input type="checkbox" id="chkPermission" class="ckbox" />            <span class="box">                <span class="tick"></span>            </span>    </span>    <label for="chkPermission" style="vertical-align: super;">        Permission     </label>
```

##### Figure:

![Custom Checkbox using CSS](https://www.mindstick.com/blogs/ea65ec56-6bcb-4ff3-9386-45aa9b4d9475/images/0152cfd9-d965-4b34-858b-0a57209a26c7.jpg)

---

Original Source: https://www.mindstick.com/blog/455/custom-checkbox-using-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.