如何将自定义 CSS 添加到脆皮表单？

我正在尝试在脆皮表单的帮助下为我的网站创建一个响应式表单。我没有使用引导程序，我想将自定义 CSS 添加到脆皮表单以匹配我的整个网站。

HTML:

<form method='POST' action=''>{% csrf_token %}

            {{ form|crispy }}

                    <input type='submit' value='Sign Up' />



            </form>

使用检查元素显示：

            <form method='POST' action=''><input type='hidden' name='csrfmiddlewaretoken' value='GLJMxnnDz1MGNFC46pjoofSlo6JMCD1IXu7X3n7LsRbQfdS38SYHJMs9IAXddcck' />



<div id="div_id_full_name" class="form-group"> <label for="id_full_name" class="control-label ">
                Full name
            </label> <div class="controls "> <input class="textinput textInput form-control" id="id_full_name" maxlength="120" name="full_name" type="text" /> </div> </div> <div id="div_id_email" class="form-group"> <label for="id_email" class="control-label  requiredField">
                Email<span class="asteriskField">*</span> </label> <div class="controls "> <input class="emailinput form-control" id="id_email" maxlength="254" name="email" type="email" required /> </div> </div>


        <!--    <input class='btn btn-primary' type='submit' value='Sign Up' />-->
                        <input type='submit' value='Sign Up' />



            </form>

形式.py：

from django import forms

from .models import SignUp

class ContactForm(forms.Form):
    full_name = forms.CharField(required=False)
    email = forms.EmailField()
    message = forms.CharField()


class SignUpForm(forms.ModelForm):
    class Meta:
        model = SignUp
        fields = ['full_name', 'email']

模型.py：

from __future__ import unicode_literals

# Create your models here.
from django.db import models

# Create your models here.
class SignUp(models.Model):
    email = models.EmailField()
    full_name = models.CharField(max_length=120, blank=True, null=True)
    timestamp = models.DateTimeField(auto_now_add=True, auto_now=False)
    updated = models.DateTimeField(auto_now_add=False, auto_now=True)

    def __unicode__(self): #Python 3.3 is __str__
        return self.email

As 文档说 http://django-crispy-forms.readthedocs.io/en/latest/install.html#template-packs，默认使用bootstrap的脆皮表单，并且还提供了一些模板包bootstrap, bootstrap3, bootstrap4 and uni-form。另请参阅关于覆盖项目模板 http://django-crispy-forms.readthedocs.io/en/latest/layouts.html#overriding-project-templates

如果您需要自定义这个脆皮表单，您需要为您的项目创建一个新的自定义模板，例如crispy_forms/templates/<foobar>/。您可以在存储库的此路径中签出：https://github.com/django-crispy-forms/django-crispy-forms/tree/dev/crispy_forms/templates https://github.com/django-crispy-forms/django-crispy-forms/tree/dev/crispy_forms/templates

但是，以前的脆皮表单具有模板标签来处理特定字段。其中之一是{{ form.field_name|as_crispy_field }} http://django-crispy-forms.readthedocs.io/en/latest/_modules/templatetags/crispy_forms_filters.html，下面这个例子是它的输出。

<div id="div_id_email" class="control-group">
  <label for="id_email" class="control-label">Email address</label>
  <div class="controls">
    <input class="form-control" id="id_email" maxlength="254" name="email" required="required" type="email" />
  </div>
</div>

其他选项，您可以使用表单小部件内的特定 html 选择器/属性来处理它，例如 htmlclass, id, style， 要不然。

例如你的情况；

class SignUpForm(forms.ModelForm):

    class Meta:
        model = SignUp
        fields = ['full_name', 'email']
        widgets = {
          'email': forms.EmailInput(attrs={'class': 'form-control custom-class'}),
        }

然后，如果你渲染为{{ form.email|as_crispy_field }}，这应该呈现 html；

<div id="div_id_email" class="control-group">
  <label for="id_email" class="control-label">Email address</label>
  <div class="controls">
    <input class="form-control custom-class" id="id_email" maxlength="254" name="email" required="required" type="email" />
  </div>
</div>

Crispy 表单还提供了简单的内部配置settings.py, Django 字段生成默认类，crispy-forms 处理这些并添加其他类以与 CSS 框架兼容。例如一个CharField生成一个<input class="textinput", 了解更多... http://django-crispy-forms.readthedocs.io/en/latest/crispy_tag_forms.html#change-crispy-forms-input-default-classes

CRISPY_CLASS_CONVERTERS = {
    'textinput': "form-control cst__radius",
    'urlinput': "form-control cst__radius",
    'numberinput': "form-control cst__radius",
    'emailinput': "form-control cst__radius",
    'dateinput': "form-control cst__radius",
    'textarea': "form-control cst__radius",
    'passwordinput': "form-control cst__radius",
    'select': "form-control cst__radius",
}