Change checkbox check image to custom image

Question

I am trying to change the default 'box image' of the checkbox with CSS, but it is not working. Is there any way around this?

.class_checkbox{
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}

<input type="checkbox" class="class_checkbox">

Not without JavaScript. Do you want to rephrase your question? — iambriansreed
– iambriansreed, Commented Apr 22, 2012 at 18:51
You have to use javascript. There is not 100% way to do this just using HTML+CSS. Example: ryanfait.com/resources/custom-checkboxes-and-radio-buttons — crash01
– crash01, Commented Apr 22, 2012 at 18:54
Here is a pure CSS way to change your checkbox style. I found it really useful, since I had already other functions related to the exact same checkboxes. jotform.org/html-elements/css-checkbox-background-color — user2831723
– user2831723, Commented Jan 8, 2014 at 12:01

Developer · Accepted Answer · 2019-07-02 21:25:25Z

94

You can use pure css, just add a label to the checkbox like this:

.check_box {
    display:none;
}

.check_box + label{
    background:url('images/check-box.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

.check_box:checked + label{
    background:url('images/check-box-checked.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Example HTML:

    .check_box {
    	display:none;
    }

    .check_box + label{
    	background:url('images/check-box.png') no-repeat;
    	height: 16px;
    	width: 16px;
    	display:inline-block;
        padding: 0 0 0 0px;
    }

    .check_box:checked + label{
        background:url('images/check-box-checked.png') no-repeat;
    	height: 16px;
    	width: 16px;
    	display:inline-block;
        padding: 0 0 0 0px;
    }

<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">

edited Jul 2, 2019 at 21:25

Developer

4,3415 gold badges37 silver badges71 bronze badges

answered Dec 19, 2012 at 13:04

ali mokrani

1,1691 gold badge8 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Yuxiang Wang Over a year ago

Hi! I was wondering that what is the corresponding html code? Is it <input type="checkbox" id="chB1" class="check_box"/><label for="chB1">This is the label</label>?

ali mokrani Over a year ago

the label must be after the checkbox.

user2059983 Over a year ago

this is the best answer because it doesn't require hacking the DOM. thank you

Manuel Reis Over a year ago

could you elaborate on how the html code should look like?

Devin Rhode Over a year ago

@YuxiangWang's code is correct, label goes after the input, and the for attr value has the match the id for the checkbox input tag.

|

LogicalAnt · Accepted Answer · 2019-09-01 11:36:18Z

14

Try:

<input type="checkbox" class="input_class_checkbox">

jQuery

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

Fiddle: http://jsfiddle.net/cn6kn/

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

.class_checkbox {
    width: 20px;  
    height: 20px;
    background-color: red;
}
.class_checkbox.checked {
    background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">

edited Sep 1, 2019 at 11:36

LogicalAnt

9633 gold badges12 silver badges29 bronze badges

answered Apr 22, 2012 at 18:58

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

3 Comments

themhz Over a year ago

so the checkbox is replaced by a div with an action . Thanx

Aamir Afridi Over a year ago

is(':checked') not is('.checked')

iambriansreed Over a year ago

@AamirAfridi See the fiddle I just added. The code is right. The code checks to see if the CSS checkbox has the class checked if it does then it sets the checked property on the checkbox to true.

Tony · Accepted Answer · 2013-11-28 14:47:12Z

10

I created a Fiddle using pure CSS. The most voted answer doesn't handle click events and won't work well, because the checkbox value won't change.

This is my example:

http://jsfiddle.net/kEHGN/1/

Basically, we need the following html:

<div class="checkbox_wrapper">
    <input type="checkbox" />
    <label></label>
</div>

And the following CSS:

.checkbox_wrapper{
    position: relative;
    height: 16px;
    width: 17px;
}

input[type="checkbox"] {
    opacity:0;
    height: 16px;
    width: 17px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

input[type="checkbox"] + label{
    background:url('../images/unchecked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

input[type="checkbox"]:checked + label{
    background:url('../images/checked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Just check the routes of the images, and the widths and heights should be equal to the width and height of the images. On the fiddler I am using base64 encoded images.

I hope it can be useful.

answered Nov 28, 2013 at 14:47

Tony

10.2k22 gold badges88 silver badges145 bronze badges

2 Comments

connexo Over a year ago

Your label is not properly associated with the checkbox.

Alexey Burdin Over a year ago

Works well with the firefox too, while ali mokrani's answer does not.

Enbyted · Accepted Answer · 2018-03-22 13:37:58Z

3

I found another way, without using adjacent labels or surrounding divs.

My usecase was that I had a markdown parser that generates those nifty TODO lists and I wanted to style them. Changing the generated HTML wasn't a option, so I came up with this solution:

given a checkbox like this:

<input type="checkbox" id="cb">

You can style it with visibility: hidden on checkbox and visibility: visible on ::after, like this:

#cb {
  visibility: hidden;
}

input#cb::after {
  visibility: visible;
  content: "F";
  color: red;
  background: green;
  padding: 8px;
}

input#cb:checked::after {
  content: " T ";
  color: green;
  background: red;
}

<!doctype html>
<html>

<body>
  <input type="checkbox" id="cb">
</body>

</html>

EDIT:

@connexo in a comment pointed out that input elements cannot have content. It could be easly done using label element, for example like so (please someone correct me if this is wrong, I don't have non-webkit browser handy to test it).

#cb-span * {
  visibility: hidden;
}

input#cb + label::after {
  visibility: visible;
  content: "F";
  color: red;
  background: green;
  padding: 8px;
}

input#cb:checked + label::after {
  content: " T ";
  color: green;
  background: red;
}

<!doctype html>
<html>

<body>
  <span id="cb-span">
    <input type="checkbox" id="cb">
    <label for="cb"></label>
  </span>
</body>

</html>

The checkbox works just like normal one and you can style it anyway you like.

Maybe it'll help someody (and I can bookmark it, because I haven't found anything like this on the web)

edited Mar 22, 2018 at 13:37

answered Jun 2, 2017 at 19:19

Enbyted

688 bronze badges

2 Comments

connexo Over a year ago

This should never have worked in the first place, as input elements cannot have content - and thus, no ::after or ::before. Firefox correctly won't show your T and F.

Enbyted Over a year ago

Hmm, I have tested it on firefox back then and it worked perfectly fine.

Sergei Ryzhov · Accepted Answer · 2016-12-14 14:09:08Z

Maybe will be useful my sample with LESS.

<div class="custom-checkbox">
    <input component="input" type="checkbox"/>
    <label>Here is caption right to checkbox</label>
</div>

    @imgsize: 25px;
    .custom-checkbox{
        position: relative;

        > input[type="checkbox"] {

        display:none;
        position: absolute;
        top: 0;
        left: 0;

            + label{

                background:url('../img/unchecked.png') no-repeat 0 0;
                background-size:@imgsize;
                height: @imgsize;
                padding: 4px 0 5px 35px;
                display: inline-block;
                -webkit-transition-duration: 0.3s;
                -moz-transition-duration: 0.3s;
                transition-duration: 0.3s;        
            }
        }
        > input[type="checkbox"]:checked + label{

            background:url('../img/checked.png') no-repeat;
            background-size:@imgsize @imgsize;
        }
    }

Collectives™ on Stack Overflow

Change checkbox check image to custom image

5 Answers 5

6 Comments

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related