Question

我尝试过我的复选框样式，其中应用了类“checkBox”但没有成功。我哪里错了？

.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或类

设置不同的样式

Answer 1

您应该使用像Firebug或Chrome开发者工具这样的DOM检查器。看看ExtJS生成的DOM：

<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选择器非常明显且非常简单：

.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伪类，因为输入类型是按钮，而不是复选框。

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

另见this fiddle（使用ExtJS 4.2.1，因为您没有说明您使用的是哪个版本）

具有特定类的Sencha样式复选框

1 个答案: