Sencha風格複選框與特定類

我已經嘗試過我的複選框，它有一個類「複選框」應用但沒有成功。我錯在哪裏？Sencha風格複選框與特定類

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

來源

2014-01-21 Jacob

使用DOM檢查，這是任何其他CSS沒有什麼不同。 –

您是否嘗試將這些樣式直接應用於複選框？雅不能使用'：after {content：''; ''輸入。你可以請張貼你的標記嗎？ – monners

標記生成！ – Jacob

你真的應該使用DOM檢查類似Firebug或Chrome開發者工具風格迥異的多個複選框。在看看這是由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，因爲你沒有說明你正在使用的版本）

來源

2014-01-21 09:21:23 matt

謝謝先生！ – Jacob

現在標籤不見了？我怎樣才能讓標籤的樣式變得複雜，因此複選框上有一些文字 – Jacob

.checkBox .x-form-checkbox + .checkBox：在{ content：'text over'; } 這很遺憾不起作用 – Jacob

Sencha風格複選框與特定類

回答

相關問題