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

你当前修改的是**输入框组件（widget）**的属性，因此只会影响输入框内的内容样式。表单标签（如username、password对应的标签）是独立于输入框的元素，需要单独处理样式，以下是几种可行方案：

方案1：通过字段的label_attrs参数设置（Django 3.1+支持） #

直接在定义表单字段时，通过label_attrs给标签添加样式或类，支持静态定义和动态修改：

class LoginForm(AuthenticationForm):
    username = UsernameField(
        widget=forms.TextInput(attrs={'autofocus': True, 'class': 'form-control', 'style': 'font-size: 30px;'}),
        label_attrs={'style': 'font-size: 20px; font-family: Arial;'}  # 静态设置标签样式
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={'autocomplete': 'current-password', 'class': 'form-control'}),
        label_attrs={'class': 'form-label'}  # 给标签加自定义类
    )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['username'].label = 'Username:'
        # 动态修改标签属性（如果需要）
        self.fields['password'].label_attrs.update({'style': 'font-size: 20px;'})

方案2：在模板中手动渲染标签并添加样式 #

如果模板是手动渲染表单字段（而非依赖{{ form.as_p }}这类自动渲染方式），可以直接在模板层给标签设置样式：

<div class="form-group">
    <label for="{{ form.username.id_for_label }}" style="font-size:20px; font-family:Arial;">{{ form.username.label }}</label>
    {{ form.username }}
</div>
<div class="form-group">
    <label for="{{ form.password.id_for_label }}" style="font-size:20px; font-family:Arial;">{{ form.password.label }}</label>
    {{ form.password }}
</div>

方案3：通过CSS类统一控制（推荐） #

避免内联样式的冗余，给标签添加自定义CSS类后，在样式文件中统一配置：

1. 在forms.py中给标签添加类：

class LoginForm(AuthenticationForm):
    username = UsernameField(
        widget=forms.TextInput(attrs={'autofocus': True, 'class': 'form-control'}),
        label_attrs={'class': 'form-label-custom'}
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={'autocomplete': 'current-password', 'class': 'form-control'}),
        label_attrs={'class': 'form-label-custom'}
    )

2. 在CSS文件中定义类样式：

.form-label-custom {
    font-size: 20px;
    font-family: 'Arial', sans-serif;
    color: #333;
    font-weight: 500;
    /* 其他需要的样式属性 */
}

为什么你之前的代码未生效？ #

你修改的self.fields['username'].widget.attrs是给输入框组件添加属性，而标签是独立的DOM元素，不属于widget的一部分，因此不会影响标签样式。

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