如何修改Django表单的字体大小及样式？

问题修复步骤 #

1. 修复HTML文档结构错误 #

你的main.html中DOCTYPE写法错误，模板变量拼接会导致浏览器无法正确识别文档类型，进入怪异模式，直接引发样式失效：

<!-- 错误写法 -->
{{ '<' }}{{ '!DOCTYPE html>' }}

<!-- 替换为正常写法 -->
<!DOCTYPE html>

2. 确保CSS文件正确加载 #

检查main.css的路径与Django静态文件配置是否匹配：

• 确认项目settings.py中已配置静态文件：

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [BASE_DIR / "static"]
  

• 确认静态文件目录结构为static/main/css/main.css，与模板中的引用路径一致。

3. 强制覆盖表单与标题样式 #

在main.css中添加高优先级样式规则，覆盖默认或Bootstrap的样式：

/* 调整标题样式 */
#content h1 {
    font-size: 1.5rem;
    font-family: Arial, sans-serif;
    color: #333;
}

/* 调整表单容器样式 */
.form_sign {
    max-width: 500px;
    margin: 2rem auto;
    padding: 1rem;
}

/* 调整表单段落、标签、输入框样式 */
.form_sign p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.form_sign label {
    font-size: 0.85rem;
    font-weight: normal;
}

.form_sign input[type="text"],
.form_sign input[type="email"],
.form_sign input[type="password"] {
    font-size: 0.9rem;
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.form_sign input[type="submit"] {
    font-size: 0.9rem;
    padding: 0.5rem 1.5rem;
}

4. 给表单字段添加自定义类（适配Bootstrap可选） #

如果想利用Bootstrap的表单样式，在forms.py中给字段的widget添加form-control类：

class SignUpForm(UserCreationForm):
    phone_number = forms.CharField(
        max_length=15, 
        required=True, 
        help_text='Номер телефона в формате +7 9XX XXX XX XX',
        widget=forms.TextInput(attrs={'class': 'form-control'})
    )
    password1 = forms.CharField(
        label='Password',
        strip=False,
        widget=forms.PasswordInput(attrs={"autocomplete": "new-password", 'class': 'form-control'}),
    )
    
    class Meta:
        model = User
        fields = ('username', 'phone_number', 'email', 'password1', 'password2', )
        widgets = {
            'username': forms.TextInput(attrs={'class': 'form-control'}),
            'email': forms.EmailInput(attrs={'class': 'form-control'}),
            'password2': forms.PasswordInput(attrs={'class': 'form-control'}),
        }

内容的提问来源于stack exchange，提问作者Vechniy_pervokursnik