Sencha style checkbox with specific class

Question

I have tried styling my checkbox which has a class "checkBox" applied but no succes. Where am I wrong?

.checkBox .x-input-checkbox:checked  + .x-field-mask:after  {
    content: "";
    height: 45px;
    width: 45px;

    background-image:url(http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png);
    background-size: contain;
    display: block;
}

.checkBox .x-input-checkbox  + .x-field-mask:after {
    content: "";
    height: 45px;
    width: 45px;

    background-image:url(http://png-2.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png);
    background-size: contain;
    display: block;
}

<input type="button" id="markModeCheckbox-inputEl" role="checkbox" class="x-form-field x-form-checkbox x-form-cb  " autocomplete="off" hidefocus="true" data-errorqtip="">
<label id="markModeCheckbox-boxLabelEl" class="x-form-cb-label x-form-cb-label-after" for="markModeCheckbox-inputEl">Box Label</label>

I am going to have multiple checkboxes which I want to style different depending on id or class

Answer 1

You should really use a DOM inspector like Firebug or the Chrome Developer Tools. Having a look at the DOM which is generated by ExtJS:

<table class="x-field checkBox x-table-plain x-form-item x-form-type-checkbox x-field-default x-border-box" cellpadding="0" id="checkboxfield-1009" style="table-layout: auto;">
    <tbody>
        <tr role="presentation" id="checkboxfield-1009-inputRow" class="x-form-item-input-row">
            <td role="presentation" id="checkboxfield-1009-labelCell" style="" valign="top" halign="left" width="105" class="x-field-label-cell">
                <label id="checkboxfield-1009-labelEl" for="checkboxfield-1009-inputEl" class="x-form-item-label x-unselectable x-form-item-label-left" style="width:100px;margin-right:5px;" unselectable="on">My Checkbox:</label>
            </td>
            <td role="presentation" class="x-form-item-body  x-form-cb-wrap" id="checkboxfield-1009-bodyEl" colspan="2">
                <input type="button" id="checkboxfield-1009-inputEl" class="x-form-field x-form-checkbox x-form-cb" autocomplete="off" hidefocus="true" aria-invalid="false" data-errorqtip="">
            </td>
        </tr>
    </tbody>
</table>

...the CSS selectors are quite obvious and very simple:

.checkBox .x-form-checkbox {
    width: 45px;
    height: 45px;
    background-image: url(http://png-2.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png);
    background-position: 0px 0px;
}
.checkBox.x-form-cb-checked .x-form-checkbox {
    background-image: url(http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png);
}

Note, that you cannot use the :checked pseudo-class, since the input type is button, not checkbox.

However, you can use the CSS class .x-form-cb-checked which is applied when the checkbox is checked.

Also see this fiddle (with ExtJS 4.2.1, since you did not state which version you are using)