不能覆盖使用脆皮形式的复选框样式

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代码。使它更容易，并且使样式与代码分开。