如何向特定的Symfony2表单选项添加CSS类？

Question

我可以使用Javascript来实现这个功能，但我想知道是否可以为特定的Symfony2表单选项（而不是选择字段本身）添加CSS类。

例如，我想在“select”中的各个“option”标签上应用不同的CSS样式。我只能找到一种方法来将类添加到“option”标签中。

谢谢您的帮助。

- David Undy

Answer 1

我想你可以简单地这样做：

我想你可以简单地这样做：

{{  form_widget(form.name, { 'attr' : { 'class' : 'myClass' } })  }}

按照这里所述的方法，无需创建自己的表单样式。

- gremo

---

或者你可以将form_widget包装在一个div标签中，并为其分配属性。 - DarkLeafyGreen

这将把标签添加到选择器中，可能也会添加到选项中，但不允许您对各个选项应用类。 - CriticalImpact

@CriticalImpact 你说得对，所以楼主应该创建一个自定义样式。 - gremo

Answer 2

已经提供的答案非常好，我认为@CriticalImpact的回答最灵活。但是我想提一下，如果您正在使用表单类，您也可以通过表单构建器定义本身向字段添加额外属性：

class SomeType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('someField', "text", array("attr" => array("class" => "someCssClass")))
            ->add("save", "submit");
    }
}

我发现这对于基本表单很有帮助，因为它仍然允许您在Twig文件中进行简单的{{ form(someForm) }}调用。

（请注意，此解决方案仍具有@CriticalImpact提到的上面的缺点）

- Thomas Kelley

Answer 3

您可以覆盖表单中特定小部件的布局，这意味着您可以覆盖选择器的呈现方式，并放入自定义代码以检查选项值并在那里输出自定义类。

您需要为表单应用自定义布局，如下所示。

{% form_theme form 'form_theme.html.twig' %}

然后，在布局文件中，您需要覆盖特定表单的特定字段（除非您要直接编辑choice_widget，在这种情况下，所有使用choice的字段都将具有该功能）。

为此，您必须复制小部件，即choice_widget，然后将其命名为[_formName_fieldName_widget]

因此，如果您的表单名称是events，字段名称是requireTickets，则为_events_requireTickets_widget

- CriticalImpact

---

谢谢，我不需要类名来应用特定的样式，但是一些jQuery插件依赖于<option>字段具有特定的类。我更喜欢不直接编辑插件，所以这很有帮助 :) - David Undy

Answer 4

现在可以通过 choice_attr 来为个别选项添加 CSS 样式等属性，例如：choice_attr。

use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
// ...

$builder->add('attending', ChoiceType::class, array(
    'choices' => array(
        'Yes' => true,
        'No' => false,
        'Maybe' => null,
    ),
    'choice_attr' => function($val, $key, $index) {
        // adds a class like attending_yes, attending_no, etc
        return ['class' => 'attending_'.strtolower($key)];
    },
));

- André