如何在Symfony表单中为select标签添加自定义样式类

你当前的写法{'select' : {'class' : 'form-select'}}不符合Symfony表单的配置规则，因为DateType生成的年、月、日三个select是表单的独立子字段，需要单独为每个子字段设置样式类。下面提供两种可行的解决方法：

方法一：在Twig模板中直接渲染子字段 #

你可以分别渲染出生日期的日、月、年三个子字段，给每个字段添加目标样式类：

<div class="form-floating mb-3">
    <p>Quelle est ta date de naissance ?</p>
    {{ form_widget(userform.birthdate.day, {'attr': {'class': 'form-select'}}) }}
    {{ form_widget(userform.birthdate.month, {'attr': {'class': 'form-select'}}) }}
    {{ form_widget(userform.birthdate.year, {'attr': {'class': 'form-select'}}) }}
</div>

如果觉得代码重复，也可以用循环简化：

<div class="form-floating mb-3">
    <p>Quelle est ta date de naissance ?</p>
    {% for child in userform.birthdate %}
        {{ form_widget(child, {'attr': {'class': 'form-select'}}) }}
    {% endfor %}
</div>

方法二：在FormType类中统一配置（更推荐） #

在你的表单类（比如UserFormType）的buildForm方法里，给birthdate字段的子字段统一配置样式属性，这样Twig模板里无需重复编写样式类：

use Symfony\Component\Form\Extension\Core\Type\DateType;

// ...

$builder
    // 其他字段配置...
    ->add('birthdate', DateType::class, [
        'widget' => 'choice', // 确保使用下拉选择的展示形式
        'years' => range(date('Y') - 100, date('Y')), // 可选：自定义年份范围
        'day_options' => ['attr' => ['class' => 'form-select']],
        'month_options' => ['attr' => ['class' => 'form-select']],
        'year_options' => ['attr' => ['class' => 'form-select']],
    ]);

之后在Twig里直接渲染整个出生日期字段即可：

<div class="form-floating mb-3">
    <p>Quelle est ta date de naissance ?</p>
    {{ form_widget(userform.birthdate) }}
</div>

以上两种方法都能让生成的每个select标签带上form-select样式类，满足你的需求。

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