Show image instead of checked state of checkbox in extjs

css, extjs, extjs4, extjs4.1

Solution

Well, the image only changes its background position with

.x-form-cb-checked {
     background-position: 0 -13px;
}

cause the origin image looks like this:

You should change the whole image here.

I would suggest to change the Base class and force a override

like so:

.newBase input{
    background-image:url('../resources/images/checkBox_Tick_Mark.png') !Important;
}

And in the config

...
baseCls: 'newBase',
...

see your JSFiddle (The image path is incorrect, but it should show you the trick)

Problem

How to show a image (ticked image) instead of the default tick of checkbox when the user checks it? I tried using `checkedCls` config, in which the image is coming but backside of the checkbox. ``` checkedCls: 'checkedBoxStyle' ``` ``` .checkedBoxStyle{ background-image:url('http://www.chathamhouse.org/sites/default/files/public/images/buttons/tick-icon.png'); background-repeat:no-repeat; } ``` jsfiddle to start.

Original source