how can i style checkbox using CSS?

How to style checkbox using CSS, I am trying to use this HTML/CSS code, but it is not working

<input type="checkbox" class"checkBoxStyle" />


border:1px solid black;

I am new to HTML/CSS, and would like to know about it, thanks

Asked by:- Vipin
: 3297 At:- 7/26/2017 11:07:23 AM
CSS Style-checkbox HTML checkbox

3 Answers
profileImage Answered by:- vikas_jk

You cannot directly apply CSS to checkbox, In that in modern browsers, we can use only CSS to style checkbox, in older browser you need the support of javascript also.

Let's go for CSS only solution first

<input type="checkbox" id="c1" name="cc" />
<label for="c1">
    <span></span>Check Box 1

CSS code for it

/*hide the actual checkbox.*/
input[type="checkbox"] {

input[type="checkbox"] + label {
/*show background as sprite sheet for checkbox, so here we what we have to do is set the background position on this span, which is image*/
input[type="checkbox"] + label span {
    margin:-2px 10px 0 0;
    background:url( left top no-repeat;

/*change background image using sprite*/
input[type="checkbox"]:checked + label span {
    background:url( -19px top no-repeat;

here what were are using this code

input[type="checkbox"]:checked + label {

with the help of CSS3 pseudocode  we are able to check the status of checkbox(if it is checked or unchecked), if it is checked we are selecting the element directly following the checkbox or radio using +

With the help of above code, we are toggling the CSS sprite images, the complete image is here


here is the actual Source and Codepen link

Style checkbox using CSS and Font-Awesome

<link rel="stylesheet" href="" >

<span class="bigcheck">
    <label class="bigcheck">Custom Check
        <input type="checkbox" class="bigcheck" name="CustomCheck" value="yes"/>
        <span class="bigcheck-target"></span>


span.bigcheck-target {
    font-family: FontAwesome; /* use an icon font for the checkbox */    
input[type='checkbox'].bigcheck {     
    position: relative;
    left: -999em; /* hide the real checkbox */

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
    content: "\f096"; /* font-awesome code for check */
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
    content: "\f046"; /* font-awesome code for checked box (fa-check-square-o) */



At:- 7/26/2017 12:24:00 PM Updated at:- 12/15/2022 7:11:27 AM
thanks the above answer worked for me 0
By : Vipin - at :- 8/13/2017 8:17:33 AM

profileImage Answered by:- jaya

Above answer is correct to style checkbox using CSS, but here is another solution and to understand it in a better way.

Basically we are toggling the HTML for attribute on <label> matches the id on <input>, so clicking on the <label> will toggle the <input> checkbox.So it will be like

<input id="toggle" type="checkbox">
<label for="toggle">

then we are hiding the <input> using

input {
    position: absolute;
    left: -9999px;

Now, we need to convey the checked/unchecked state, which we can do that with <label>, as input is already hidden, using the code

input:checked + label {
    /*styles */

combination of the :checked pseudo-class and the + adjacent sibling selector means “when the checkbox is checked, find the <label> right after it and apply styles”

In this way, we achieve the styling of checkbox using radio button, here is the full description and source of my answer, which is easy to understand.

At:- 7/26/2017 12:37:40 PM

profileImage Answered by:- vikas_jk

Change checkbox color using CSS accent-color property

.colored-input {
    accent-color: #9d3039;
    height: 20px; /* not needed */
    width: 20px; /* not needed */

and HTML

<input class="colored-input" type="checkbox" />

<!-- Radio button example -->
<input class="colored-input" type="radio" />

Fiddle output:

Source: Style checkbox and radio button using CSS


At:- 12/15/2022 2:56:36 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use