如何在Django产品添加表单中为ModelChoiceField添加CSS属性？

我正在设计产品添加表单，尝试为ModelChoiceField添加CSS属性却未能成功。CharField可轻松通过attrs添加CSS属性，但ModelChoiceField及其Widget均不支持该参数。请问是否无需重定义ModelChoiceField及其Widget，即可为其添加'placeholder'和'class'属性？

代码示例 #

class ProductAddForm(forms.ModelForm):

    product_group = forms.ModelChoiceField(
        queryset=ProductGroup.objects.all().order_by('group_name').order_by('to_parent'),
        empty_label='group',
        label='Group',
    )
    bar_code = forms.CharField(
        widget=forms.TextInput(
            attrs={'placeholder': "bar code", 'class': "form-control-class",}
        ),
    )

解决方案 #

当然可以，不用重定义字段或Widget就能实现。ModelChoiceField默认使用Select组件，你只需要在定义字段时，给widget参数传入forms.Select并设置attrs属性即可。

修改后的代码 #

class ProductAddForm(forms.ModelForm):
    product_group = forms.ModelChoiceField(
        queryset=ProductGroup.objects.all().order_by('group_name').order_by('to_parent'),
        empty_label='group',
        label='Group',
        # 为Select组件添加class和placeholder属性
        widget=forms.Select(attrs={'class': 'form-control-class', 'placeholder': '请选择分组'})
    )
    bar_code = forms.CharField(
        widget=forms.TextInput(
            attrs={'placeholder': "bar code", 'class': "form-control-class",}
        ),
    )

关于placeholder的注意事项 #

原生select控件的placeholder属性在多数浏览器中不会直接生效，你可以通过以下方式模拟效果：

• 将empty_label设为提示文本，并给Select添加required属性
• 配合CSS隐藏非第一个选项，直到用户选择：

/* 模拟placeholder样式 */
select option:first-child {
    color: #999;
}
/* 未选择时只显示第一个选项 */
select:not(:valid) option:not(:first-child) {
    display: none;
}

对应的代码调整：

product_group = forms.ModelChoiceField(
    queryset=ProductGroup.objects.all().order_by('group_name').order_by('to_parent'),
    empty_label='请选择分组',
    label='Group',
    widget=forms.Select(attrs={'class': 'form-control-class', 'required': 'required'})
)

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