Question

In my form I generate the birthdate field with:

{{form_widget(form.birthdate) }}

The following html is generated:

<div id="fos_user_registration_form_birthdate">
    <select id="fos_user_registration_form_birthdate_month"     name="fos_user_registration_form[birthdate][month]">
    <select id="fos_user_registration_form_birthdate_day" name="fos_user_registration_form[birthdate][day]">
    ,
    <select id="fos_user_registration_form_birthdate_year" name="fos_user_registration_form[birthdate][year]">
</div>

I want to add a class to the select in order to customize their style.
How can I do that?

PS: If I add

'attr' => array('class' => 'select-style'),

the class is attributed to <div id="fos_user_registration_form_birthdate">, not to the select

Answer 1

That is the best you can do without overriding the twig template for the date widget yourself. If you look at the default template for the date widget here you’ll see there are no attributes passed specifically to the select inputs. You can, however, apply a class to the containing div and then use a CSS selector like this to style them

.dateWrapper select { /* style here */ }