CSSでdjango-multiselectfieldをスタイルする方法

Question

私のモデルフォームに 'django-multiselectfield'を使用しているので、ユーザーは自分のフォームで複数の「エリア」を選択できます。私が今知りたいことは、CSSを使ってmultiselectfieldのスタイルを設定する方法です。

私は通常、モデルフィールドの他のすべてのタイプで行うように私は私のテンプレートにフォームフィールドにクラスを追加するだけで試してみましたが、ない運：

{% render_field form.area class="area" %} 

すべてのヘルプははるかに高く評価されないであろう。

Answer 1

これは、`django-multiselectfield'のマニュアルに記載されています。具体的には、

フォームテンプレートでこのウィジェットのHTMLをカスタマイズすることは可能です。これを行うには、フォーム{field}.field.choicesをループする必要があります。ここでproviders呼ばMultiSelectFieldのチェックボックスの後に/下にフィールドラベルを表示する例です。

Answer 2

ここに私がやったことの一例です。

{% for field in form %} 
    <div class="fieldWrapper">{{ field.errors }} 
    <input type="{{ field.field.widget.input_type }}" name="{{ field.html_name }}" id="{{field.id_for_label}}" class="col-12 input-login" placeholder="{{field.label}}" > 
    {% if field.help_text %} 
     <p class="help">{{ field.help_text|safe }}</p> 
    {% endif %} 
    </div> 
{% endfor %} 

これでフィールドを単純なhtml入力フィールドのようにカスタマイズできます。 このpageには素晴らしい詳細な説明があります。ビトー

に拍手を送りたい------編集-----

はほとんど忘れてしまいました。これは通常のフォームの例です。 django-multiselectfieldの公式ドキュメントを参照してフィールドの属性名を取得し、それぞれの属性を置き換える必要があります。

Answer 3

フォームを手動でレンダリングしてループすることをお勧めします。

は、あなたがこのようにそれを行うことができ、あなたが質問モデルへのForeignKeyで選択モデルを持っていると言う：

<form class="qform" action="" method="post"> 
    {% csrf_token %} 
    <p class="title">{{ form.question }}</p> 
    {% for choice in form.choice_set.all %} 
     <input type="checkbox" name="{{ choice }}" id="{{ choice }}{{ forloop.counter }}" 
       value="{{ choice.id }}"> 
     <label for="{{ choice }}{{ forloop.counter }}">{{ choice }}</label> 
    {% endfor %} 
</form> 

あなたが好きなあなたのstyle.cssで入力し、ラベルを参照することができます。

input[type="checkbox"]{ 
    some: stuffs...; 
} 

label { 
    some: stuffs...; 
} 

私はこれが助けてくれることを願っています。