Как добавить CSS-класс в форму пароля регистрации Django
Я пытаюсь стилизовать (с помощью классов) поле пароля в Django.
Я успешно стилизовал все остальные поля, кроме новых полей пароля (password1 & 2). скриншот текущих результатов
Мой 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, отображающий поле ввода.
Как добавить классы к этим двум проблемным полям пароля?
Большое спасибо за уделенное время.
Аустин
В 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 .