如何为WTForms自定义字段/子字段指定自定义CSS类

要给MultiCheckboxField生成的<ul>和<li>分别设置不同的CSS类，需要重写默认的ListWidget——原生Widget没有提供给<li>添加自定义类的接口。

方法一：自定义ListWidget并固定li类 #

1. 重写ListWidget，添加对<li>类的支持：

from wtforms.widgets import ListWidget, CheckboxInput
from wtforms.fields import SelectMultipleField
from flask_wtf import FlaskForm

class CustomListWidget(ListWidget):
    def __init__(self, prefix_label=False, li_class=None):
        super().__init__(prefix_label)
        self.li_class = li_class

    def render(self, field, **kwargs):
        # 提取ul的类，剩余kwargs用于其他属性
        ul_class = kwargs.pop('class', '')
        html = [f'<ul class="{ul_class}">']
        
        for subfield in field:
            li_attrs = {}
            if self.li_class:
                li_attrs['class'] = self.li_class
            # 生成带类的li标签
            html.append(f'<li {self.html_params(**li_attrs)}>{subfield()}</li>')
        
        html.append('</ul>')
        return '\n'.join(html)

2. 修改自定义字段，使用新的Widget：

class MultiCheckboxField(SelectMultipleField):
    widget = CustomListWidget(prefix_label=False, li_class='another custom class')
    option_widget = CheckboxInput()

3. 模板中正常指定ul的类：

{{ form.categories(class='custom class') }}

方法二：动态指定li类（模板或视图中设置） #

如果需要在渲染时动态调整<li>的类，可以修改CustomListWidget，让它支持从渲染参数中读取li_class：

1. 调整CustomListWidget的render方法：

class CustomListWidget(ListWidget):
    def render(self, field, **kwargs):
        ul_class = kwargs.pop('class', '')
        # 从kwargs中提取li_class参数
        li_class = kwargs.pop('li_class', '')
        html = [f'<ul class="{ul_class}">']
        
        for subfield in field:
            li_attrs = {}
            if li_class:
                li_attrs['class'] = li_class
            html.append(f'<li {self.html_params(**li_attrs)}>{subfield()}</li>')
        
        html.append('</ul>')
        return '\n'.join(html)

2. 修改自定义字段使用这个Widget：

class MultiCheckboxField(SelectMultipleField):
    widget = CustomListWidget(prefix_label=False)
    option_widget = CheckboxInput()

3. 模板中同时指定ul和li的类：

{{ form.categories(class='custom class', li_class='another custom class') }}

或者在视图函数中通过render_kw设置：

@app.route('/test/', methods=['GET'])
def test():
    form = Categories()
    form.categories.choices = categorylist()
    # 设置渲染参数
    form.categories.render_kw = {
        'class': 'custom class',
        'li_class': 'another custom class'
    }
    return render_template('test.html', form=form )

最终会生成你期望的HTML结构：

<ul class='custom class'>
<li class='another custom class'>
<!-- 复选框内容 -->
</li>
</ul>

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