0

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

AustinNotAustin
  • 5
  • 2
  • 1
    Does this answer your question? [Why widget EmailInput style doesn't apply](https://stackoverflow.com/questions/67764360/why-widget-emailinput-style-doesnt-apply) – Abdul Aziz Barkat Jun 01 '22 at 03: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 Jun 01 '22 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 Jun 01 '22 at 12:20

1 Answers1

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 .

Om Kashyap
  • 118
  • 8