Sencha风格复选框与特定类 [英] Sencha style checkbox with specific class

问题描述

我已经尝试了我的复选框，其中已经应用了一个类复选框，但没有成功。
我错了什么？

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>

我将有多个复选框，我想根据id或类

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

推荐答案

您应该真正使用像Firebug或Chrome Developer Tools这样的DOM检查器。看看由ExtJS生成的DOM：

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>

... CSS选择器非常明显，非常简单：

...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);
}

请注意，您不能使用：checked 伪类，因为输入类型是按钮，而不是复选框。

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

但是，您可以使用CSS类。选中复选框时应用的x-form-cb-checked

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

另请参阅这个小提琴（用ExtJS 4.2.1，因为你没有说明你使用哪个版本）

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

这篇关于Sencha风格复选框与特定类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！