如何在 Django 注册密码表单中添加 CSS class

Question

我正在尝试（通过类）Django 密码字段的样式。

除了新密码字段（密码 1 和 2）之外，我已经成功地设置了所有其他字段的样式。 screen shot of current results

我的html:

<form method="post">
<ul>
        <li>{{ form.username }}</li>
        <li>{{ form.email }}</li>
        <li>{{ form.password1 }}</li>
        <li>{{ form.password2 }}</li>
        <li>{{ form.password }}</li>
    </ul>
</form>

我的forms.py:

class CustomUserCreationForm(UserCreationForm):
class Meta(UserCreationForm):
    model = CustomUser
    fields = ('username', 'email', 'password1', 'password2', 'password')
    widgets = {
        'username': TextInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': "Username"
        }),
        'email': EmailInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': 'Email address'
        }),
        'password1': PasswordInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'type': 'password',
            'name': 'password',
            'placeholder': 'Password'
        }),
        'password2': PasswordInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': 'Password'
        }),
        'password': PasswordInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': 'Password'
        }),
    }

为什么新密码和重复密码字段不显示样式？我认为名称 password1 是正确的，因为我在 forms.py 以及输入字段 HTML 中没有收到任何错误。

如何将类添加到那两个麻烦的密码字段？

非常感谢您的宝贵时间。

-奥斯汀

Answer 1

在 attrs 中，添加“id”字段，以便您可以使用其 id 访问这些字段，然后您可以在其中应用 css。

class CustomUserCreationForm(UserCreationForm):
class Meta(UserCreationForm):
    model = CustomUser
    fields = ('username', 'email', 'password1', 'password2', 'password')
    widgets = {
        'username': TextInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': "Username",
            'id' : "id_register_form_username" , 
        }),
        'email': EmailInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': 'Email address' ,
            'id' : "id_register_form_email' , 
        }),
        'password1': PasswordInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'type': 'password',
            'name': 'password',
            'placeholder': 'Password',
            'id' : "id_register_form_password1" , 
        }),
        'password2': PasswordInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': 'Password'
            'id' : "id_register_form_password2" , 
        }),
    }

然后在您的 html 中，只需使用 css 使用 id 即可。

如何在 Django 注册密码表单中添加 CSS class

How to add a CSS class to Django registration password form

django

django-models

django-forms