How can I add css classes to specific symfony2 form choices?

Question

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).

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.

Thanks in advance.

score 11 · Answer 1 · answered May 27 '12 at 10:05

11

I think you can simply do:

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

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

answered May 27 '12 at 10:05

gremo

47,186
75
257
421

...or you just wrap form_widget with e.g a div tag and assign an attribute to it. – DarkLeafyGreen May 27 '12 at 10:12
6

This'll add the tag to the select and possibly to the options but it wont let you apply classes to individual options. – CriticalImpact May 27 '12 at 14:06
@CriticalImpact you're right, so OP should create a custom style. – gremo May 27 '12 at 18:54

score 4 · Accepted Answer · edited Oct 22 '13 at 08:27

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).

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

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

Thank you, I didn't need the class name to apply specific styles, but a few jQuery plugins depended on — David Undy, May 28 '12 at 03:42

score 4 · Answer 3 · edited May 23 '17 at 10:30

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:

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.

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

score 3 · Answer 4 · answered Dec 16 '17 at 16:30

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

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

How can I add css classes to specific symfony2 form choices?

4 Answers4

Linked