How to add a CSS class to Django registration password form

Question

I'm attempting to style (via classes) a Django password field.

I've successfully styled every other field other than the new password fields (password1 & 2). screen shot of current results

My 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>

My 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'
        }),
    }

Why are the new password and repeat password fields not displaying the style? I figured the name password1 was correct because I don't get any errors in forms.py as well as the HTML rending the input field.

How can I add classes to those two troublesome password fields?

Thank you very much for your time.

-Austin

Does this answer your question? Why widget EmailInput style doesn't apply — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented Jun 1, 2022 at 3:47
@AbdulAzizBarkat It does not fully answer the question. I was able to format the email fields as your link explains, but it lacks an explanation for the password fields. Another member has answer my question below though. Thank you! — AustinNotAustin
– AustinNotAustin, Commented Jun 1, 2022 at 11:56
That does answer the part for the password fields too since it is the same issue for them (They are declared in UserCreationForm hence specifying widgets for them won't work). Although the link you found is a better duplicate target yes (The answer below won't work without it). — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented Jun 1, 2022 at 12:20

Om Kashyap · Accepted Answer · 2022-06-01 09:36:01Z

1

In the attrs , add "id" field so that you can access the fields with their id and then you can apply css in that .

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

Then in your html , just use css using the id .

answered Jun 1, 2022 at 9:36

Om Kashyap

15711 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AustinNotAustin Over a year ago

This worked! Thanks! I also found this late last night (after a few hours) that worked as well: link

Om Kashyap Over a year ago

Awesome man . Great .

Daniel · Accepted Answer · 2024-12-26 21:59:43Z

Since the password fields are defined in BaseUserCreationForm and don't come from the model, the widgets in Meta won't work for them. You need to redefine them in your CustomUserCreationForm with the desired widgets.

class CustomUserCreationForm(UserCreationForm):
    password1 = forms.CharField(
    strip=False,
    widget=forms.PasswordInput(
        attrs={
            "autocomplete": "new-password",
            "class": "input input-bordered",
            "placeholder": "Password",
        }
    ),
)
    password2 = forms.CharField(
    strip=False,
    widget=forms.PasswordInput(
        attrs={
            "autocomplete": "new-password",
            "class": "input input-bordered",
            "placeholder": "Repeat Password",
        }
    ),
)

Collectives™ on Stack Overflow

How to add a CSS class to Django registration password form

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related