如何将自定义 CSS 添加到清晰的表单中？答案

【问题标题】：How do I add custom CSS to crispy forms?如何将自定义 CSS 添加到清晰的表单中？
【发布时间】：2017-07-18 10:00:32
【问题描述】：

我正在尝试借助脆皮表单为我的网站创建一个响应式表单。我没有使用引导程序，我想将自定义 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>

forms.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']

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

【问题讨论】：

标签： python html css django django-forms

【解决方案1】：

作为docs says，默认情况下使用bootstrap进行脆皮表单，还提供了bootstrap、bootstrap3、bootstrap4和uni-form的一些模板包。另请参阅Overriding project templates

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

但是，以前脆的表单有模板标签来处理特定的字段。其中之一是{{ form.field_name|as_crispy_field }}，下面这个例子就是它的输出。

<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 选择器/属性来处理它，例如 html class、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"、for more...

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",
}

【讨论】：

“自定义类”应该在我的主“style.css”文件中吗？
是的，您可以在 style.css 或任何您需要的地方自定义 CSS 样式。例如.custom-class {font-size: 12px}，但确保将引导程序的源放在style.css的源之前
正如我所说，我没有使用引导程序：/
但是，如果您需要更复杂的东西并且感到困惑，我建议您不要使用它 ...我将给您一个来自我当前项目的示例@ 987654326@
是的，不用酥脆的形式。只需根据需要自定义表格。你可以阅读这个文档docs.djangoproject.com/en/dev/topics/forms/…

【解决方案2】：

您必须编写自己的 CSS，以针对您想要设置样式的 Crispy 表单的每个元素。

使用检查元素并找到要使用的元素的 ID/类。在检查元素窗口中编写您的样式，一旦您对它感到满意，就将代码复制到一个 CSS 文件中，该文件最终将成为您的“表单覆盖”文件，使其看起来更符合您网站的其他部分。

【讨论】：

【解决方案3】：

Crispy 表单为此提供了一个框架。

首先，您可以告诉crispy_forms 使用“bootstrap4”模板：

project/settings.py

# settings
CRISPY_TEMPLATE_PACK = 'bootstrap4'
# other settings

这将根据Bootstrap 4 form templates 呈现您的按钮和输入

如果您仍想将样式应用于特定输入或按钮，您可以使用 Crispy FormHelper 类和 Layouts，顺便说一下，令人惊叹。

特别注意.css_class='...' 参数，它在HTML 中呈现为class="..."

forms.py

from crispy_forms.helper import FormHelper
from crispy_forms.layout import (
    Layout,
    Field,
    Submit,
)


class SignUpForm(forms.ModelForm):

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

    def __init__(self, *args, **kwargs):
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            'full_name',
            Field('email', css_class='custom-class')  # form-control will be provided by bootstrap templates
            Submit('submit', 'Sign Up', css_class='btn-primary')  # define your signup button here
        )

接下来，您可以使用{% crispy form %} 呈现整个表单。默认会创建form 标签和csrf_token：

signup.html

{% load crispy_forms %}
{% crispy form %}

结果

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" method="POST">
    <input type='hidden' name='csrfmiddlewaretoken' value='GLJMxnnDz1MGNFC46pjoofSlo6JMCD1IXu7X3n7LsRbQfdS38SYHJMs9IAXddcck' />
    
  <div class="form-group">
    <label for="id_full_name">Full Name</label>
    <input type="text" class="form-control" id="id_full_name">
  </div>

  <div class="form-group">
    <label for="id_email">Email <span class="required">*</span></label>
    <input type="email" class="form-control custom-class" id="id_email" required>
  </div>

  <button type="submit" class="btn btn-primary">Sign Up</button>

</form>

【讨论】：

【解决方案4】：

如果您专门针对确切的字段 css （例如：输入字段类 ie <input class="your_custom_class" />）然后尝试以下 sn-ps （不修改 Crispy助手）：

使用模型形式：

class YourForm(ModelForm):
     def __init__(self, *args, **kwargs):
         self.fields['your_field'].widget.attrs['class']='your_custom_class'

使用表格：

class YourForm(forms.ModelForm):
     class Meta:
         model = YourModel
         fields = ['field1', 'field2']
         widgets = {
         'field1': forms.TextInput(attrs={'class': 'your_custom_class'}),
         }

【讨论】：

【解决方案5】：

编写 CSS 以定位呈现的表单元素（在 chrome 中检查这些元素）。给元素一个自定义类，如“crispy-form”。例如，我设法隐藏输入文本的标签作者：

HTML：

<form class="crispy-form" method="POST" enctype="multipart/form-data">
                                 {% csrf_token %}
</form>

CSS：

.crispy-form label {
    display: none;
}

【讨论】：