如何使用 CSS 设置 django-multiselectfield 样式

Question

我在我的模型表单中使用“django-multiselectfield”，因此用户可以在我的表单中选择多个“区域”。我现在想知道的是如何使用 css 设置多选字段的样式。

我尝试像往常对所有其他类型的模型字段所做的那样，向模板中的表单字段添加一个类，但没有运气：

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

我建议您手动渲染表单并循环遍历它。

假设您有一个 Choice 模型，其中包含一个 Question 模型的外键，您可以这样做：

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

我希望这会有所帮助。