シンプルなフォームを使ってチェックボックスのスタイルを変更することはできません

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> 

そして、ここに私の取扱説明書/フォームこれはcss selectors

のサンプルである[編集2] 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> 

を発生させます

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

を私は周囲のdivにicheck-primaryクラスを追加し、ラベル・タグのうち、フィールド自体を移動。これにより、セレクタが適切に動作するようになりました。

私はこれもfields.htmlをオーバーライドすることによって行うことができますが、これは私の問題を解決する瞬間です。

これはおそらく最良の解決策ではないので、誰かがより良いものを共有できるのであれば、私はそれを感謝します。

Answer 2

私はdjango-crispy-formsの経験はありませんが、django-widget-tweaksを使ってdjangoフォームにCSSを追加します。テンプレートを調整するだけで、Pythonコードは必要ありません。それはもっと簡単になり、コードからスタイリングを分離することができます。