无法使用脆皮形式覆盖复选框样式

Question

在为我的应用程序创建表单时，我必须创建一个自定义复选框（我对 css 感到很糟糕，所以这并不容易）。我让它工作，当我手动创建表单时它看起来像这样：

手册 html 是

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

但是当在 crispy 表单上使用 wrapper_class 属性时 Field 它显示为标准：

和 crispy forms 代码：

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

我尝试使用自定义 Div 模板，但无法正常工作。在文档中，我只能找到 wrapper_class。

我是不是漏掉了一些简单的东西，或者有人能给我指出正确的方向吗？

[编辑] HTML 来自 crispy_forms 的输出：

<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>

这是我的 manual/forms 生成的 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

我没有使用 django-crispy-forms 的经验，但使用 django-widget-tweaks 将 css 添加到 django 表单。您只需要调整模板，无需 python 代码。使它变得容易得多，并且您可以将样式与代码分开。

Answer 2

在@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 class 添加到周围的 div 并将字段本身移出 label 标签。这允许选择器正常工作。

我认为这也可以通过覆盖 fields.html 来完成，但目前这解决了我的问题。

这可能不是最好的解决方案，如果有人能分享更好的解决方案，我将不胜感激。

无法使用脆皮形式覆盖复选框样式

Can't override checkbox style using crispy forms

css

django

checkbox

django-crispy-forms