Question

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

我试过简单地在我的模板中向表单字段添加一个类，就像我通常使用所有其他类型的模型字段一样，但没有运气：

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

非常感谢任何帮助。

Answer 1

`django-multiselectfield'文档中对此进行了描述。具体来说，

可以在表单模板中自定义此窗口小部件的HTML。为此，您需要遍历表单{field}.field.choices。以下示例显示了名为MultiSelectField的{{1}}复选框下方/之后的字段标签：

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有一个非常详细的解释。感谢Vitor

------ -----编辑

几乎忘记了。这是普通表格的例子。你必须通过django-multiselectfield的官方文档来获取字段属性名称，并替换相应的属性

Answer 3

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

假设你有一个带有问题模型的外键的Choice模型，你可以这样做：

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

我希望这会有所帮助。

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

3 个答案: