不能覆蓋使用脆皮形式的複選框樣式

Question

在爲我的應用程序創建表單時，我必須製作一個自定義複選框（我對css非常糟糕，所以這不太容易）。我得到它的工作，它看起來像這樣，當我手動創建表單：

手動html是

<div class="checkbox icheck-primary"> 
    {{ form.active }} 
    <label for="id_active">Active</label> 
</div> 

但在使用上的酥脆形式Field它顯示wrapper_class屬性時標準：

和crispy forms代碼：

self.helper.layout = Layout(
     Fieldset(
      'Add Contact', 
      'first_name', 
      Field('active', wrapper_class='icheck-primary', css_class='icheck-primary') 
     )) 

我試圖用一個自定義的模板Div但我無法得到它的工作。在文檔中，我能找到的是wrapper_class。

我是否錯過了一些簡單的東西，或者有人能指引我走向正確的方向？

[編輯]從crispy_forms輸出 HTML：

<div id="div_id_active" class="checkbox icheck-primary"> 
    <label for="id_active" class=""> 
    <input name="active" class="checkboxinput" id="id_active" checked="" type="checkbox"> 
     Active 
    </label> 
</div> 

這是我的手動/形式產生html

<div class="checkbox icheck-primary"> 
    <input name="stay_logged_in" class="checkbox icheck-primary" id="id_stay_logged_in" type="checkbox"> 
    <label for="id_stay_logged_in">Remember me</label> 
</div> 

[編輯2]這是的css selectors

樣品

.radio > input[type="radio"]:first-child:checked + label::before, 
.checkbox > input[type="checkbox"]:first-child:checked + label::before, 
.radio > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before, 
.checkbox > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::before { 
    content: "\e013"; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-weight: normal; 
    font-size: 10px; 
    color: #b4aba1; 
    position: absolute; 
    width: 22px; 
    height: 22px; 
    line-height: 20px; 
    border: 2px solid #b4aba1; 
    border-radius: 0 !important; 
    background-color: #0060a1 !important; 
    text-align: center; 
    margin-left: -29px; 
    vertical-align: text-top; 
} 

Answer 1

在@dirn的評論中提供了一些幫助之後，我回去製作了一個自定義模板。

因爲我所有的複選框應該看看這同我創建基於現有crispy_forms模板checkboxinput_template：

{% load crispy_forms_field %} 

    <div id="div_{{ field.auto_id }}" class="checkbox icheck-primary {% if form_show_errors and field.errors %} error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}"> 
     {{ field }} 
     <label class="control-label {{ label_class }}" for="id_{{ field.html_name }}">{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label> 
     <div class="controls {{ field_class }}"> 
      {% include 'bootstrap3/layout/help_text.html' %} 
     </div> 
    </div> 

我加入了icheck-primary類周邊div和移動領域本身出了標籤標記的。這使選擇器正常工作。

我認爲這也可以通過覆蓋fields.html來完成，但目前這解決了我的問題。

這可能不是最好的解決方案，如果有人可以分享更好的解決方案，我會很感激。

Answer 2

我沒有使用django-crispy-forms的經驗，但是使用django-widget-tweaks爲django表單添加css。你只需要調整模板，不需要python代碼。使它更容易，並且使樣式與代碼分開。