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

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