如何将css类添加到特定的symfony2表单选项中？

I could do this with Javascript, but I was wondering if I could add a css class to specific symfony2 form choices (not the choice field itself, but the individual choices).

我可以用Javascript做到这一点，但我想知道我是否可以将css类添加到特定的symfony2表单选项（不是选择字段本身，而是个别选项）。

For example I want to apply different css styles to individual 'option' tags inside a 'select'. I could only find a way to add a class to the tag.

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

Thanks in advance.

提前致谢。

4 个解决方案

#1

You can override the layout of specific widgets in your form, which means you can override the way the select renders and put in custom code to check what the value of the option is and output your custom class there.

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

You need to apply a custom layout to your form, like so

您需要将自定义布局应用于表单，如此

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

Then inside the layout file you need to override the specific field for that specific form (unless of course you want to edit the choice_widget directly in which case all fields that use choice will have the functionality).

然后在布局文件中，您需要覆盖该特定表单的特定字段（当然，除非您想直接编辑choice_widget，否则所有使用选择的字段都将具有该功能）。

To do that you have to copy the widget, so choice_widget, then name it [_formName_fieldName_widget]

要做到这一点，你必须复制小部件，所以choice_widget，然后命名它[_formName_fieldName_widget]

So if your form name was events and your field name was requireTickets, it'd be _events_requireTickets_widget

因此，如果您的表单名称是事件，而您的字段名称是requireTickets，那么它将是_events_requireTickets_widget

#2

I think you can simply do:

我想你可以做到：

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

... as explained here, without creating your own form style.

...如此处所述，不创建自己的表单样式。

#3

The answers that were already provided are very good, and I think @CriticalImpact's is the most flexible. But I just wanted to mention that if you're using a form class, you can also add extra attributes to the field via the form builder definition itself:

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

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

I've found this helpful for basic forms, because it still allows you to make a simple {{ form(someForm) }} call in your Twig file.

我发现这对基本表单很有用，因为它仍然允许你在Twig文件中进行简单的{{form（someForm）}}调用。

(Note that this solution still has the drawback that @CriticalImpact mentioned above)

（注意，这个解决方案仍然有上面提到的@CriticalImpact的缺点）

#4

Add attributes like CSS styles to individual choices can nowadays be achieved with choice_attr, e.g.:

现在可以使用choice_attr来实现将CSS样式等属性添加到单个选项中，例如：

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)];
    },
));

#1