Wie style django-multiselectfield mit CSS

Question

Ich benutze 'Django-Multiselectfield' in meinem Modell, so dass Benutzer mehrere 'Bereiche' in meinem Formular auswählen können. Was ich jetzt wissen möchte ist, wie kann ich das Multiselect-Feld mit CSS casten.

Ich habe versucht, einfach eine Klasse auf das Formularfeld Hinzufügen in meiner Vorlage, wie ich normalerweise mit allen anderen Arten von Modellfeldern, aber kein Glück:

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

Jede Hilfe wäre sehr geschätzt.

Answer 1

Dies ist in `django-multiselectfield' Dokumentation beschrieben. Speziell

Es ist möglich, den HTML-Code dieses Widgets in Ihrer Formularvorlage anzupassen. Um dies zu tun, müssen Sie das Formular {field}.field.choices durchlaufen. Hier ist ein Beispiel, das die Feldbeschriftung unterhalb zeigt/nach dem Kontrollkästchen für ein MultiSelectFieldproviders genannt:

Answer 2

Hier ist ein Beispiel dafür, was ich tat.

{% 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 %} 

Jetzt können Sie das Feld anpassen, als ob es ein einfaches HTML-Eingabefeld ist. Diese page hat eine wunderbare detaillierte Erklärung. Ein großes Lob an Vitor

------ ----- bearbeiten

Fast vergessen. Dies ist das Beispiel für normale Formulare. Sie müssen die offiziellen Dokumente von django-multiselectfield durchsuchen, um Feldattributnamen zu erhalten und die entsprechenden Attribute zu ersetzen.

Answer 3

Ich schlage vor, dass Sie das Formular manuell rendern und durchlaufen.

Sagen Sie bitte eine Wahl-Modell mit einem foreignkey auf eine Frage Modell haben, können Sie es wie folgt zu tun:

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

Sie die Eingabe und Label verweisen können in Ihrem style.css wie:

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

label { 
    some: stuffs...; 
} 

Ich hoffe, das hilft.