title: Customize CSS in collection type symfony
body: <p>I'm using a collectionType that render a multiple select inputs, I want to add the select2 css class to my form but it just doesn't works. </p>
  
  <p>This is the Form that has the collection. </p>
  
  <pre><code> -&gt;add('arrayDiagnosticos', 'collection', [
                  'type' =&gt; 'entity',
                  'label' =&gt; 'Diagnósticos dinámicos',
                  'allow_add' =&gt; true,
                  'allow_delete' =&gt; true,
  
                  'attr' =&gt; [
                          'class' =&gt; 'select2',
                      ],
                  'options' =&gt; [
                     'empty_value' =&gt; 'Seleccionar Diagnóstico',
                      'class' =&gt; 'AppBundle:Diagnostico',
                      'required' =&gt; true,
                      'label' =&gt; 'Buscador de Diagnósticos',
                      'attr' =&gt; [
                          'class' =&gt; 'select2',
                      ],
                  ],
              ])
  </code></pre>
  
  <p>The twig is </p>
  
  <pre><code>&lt;ul class="tags" data-prototype="{{  form_widget(form.arrayDiagnosticos.vars.prototype)|e }}"&gt;
  {# iterate over each existing tag and render its only field: name #}
  
      {% for diagnostico in form.arrayDiagnosticos %}
      &lt;li&gt;
        {{ form_row(diagnostico.nombreDiagnostico) }}
      &lt;/li&gt;
     {% endfor %}
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>It should render a select input like this:
  <img src="https://i.stack.imgur.com/jEWTg.png" alt="With select2 class"><a href="https://i.stack.imgur.com/jEWTg.png" rel="nofollow noreferrer">1</a></p>
  
  <p>But it renders like a regular select input
  <img src="https://i.stack.imgur.com/YGaWx.png" alt="without the select2 class"><a href="https://i.stack.imgur.com/YGaWx.png" rel="nofollow noreferrer">2</a></p>
  
  <p>This is the output html</p>
  
  <pre><code>&lt;div class="form-group"&gt;&lt;label class="control-label required"&gt;Diagnósticos dinámicos&lt;/label&gt;    
  &lt;div id="paciente_form_arrayDiagnosticos" class="select2" data-prototype="&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;&amp;lt;div class=&amp;quot;col-xs-9&amp;quot;&amp;gt;&amp;lt;select id=&amp;quot;paciente_form_arrayDiagnosticos___name__&amp;quot; name=&amp;quot;paciente_form[arrayDiagnosticos][__name__]&amp;quot; required=&amp;quot;required&amp;quot; class=&amp;quot;select2 form-control&amp;quot;&amp;gt;&amp;lt;option value=&amp;quot;&amp;quot; selected=&amp;quot;selected&amp;quot;&amp;gt;Seleccionar Diagnóstico&amp;lt;/option&amp;gt;            &amp;lt;option value=&amp;quot;1&amp;quot; &amp;gt;se siente mal&amp;lt;/option&amp;gt;            &amp;lt;option value=&amp;quot;2&amp;quot; &amp;gt;asfd&amp;lt;/option&amp;gt;            &amp;lt;option value=&amp;quot;3&amp;quot; &amp;gt;YOLO&amp;lt;/option&amp;gt;&amp;lt;/select&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;col-xs-3&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;btn btn-danger btn-sm&amp;quot; data-removefield=&amp;quot;collection&amp;quot; data-field=&amp;quot;__id__&amp;quot;&amp;gt;Eliminar Diagnóstico&amp;lt;/a&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;" data-prototype-name="__name__"&gt;&lt;ul class="bc-collection list-unstyled"&gt;&lt;/ul&gt;&lt;a href="#" class="btn btn-primary btn-sm" data-addfield="collection" data-collection="paciente_form_arrayDiagnosticos" data-prototype-name="__name__"&gt;Agregar Diagnóstico&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I also tried to do it via jQuery and no luck</p>
  
  <pre><code>&lt;script&gt;
  $(function(){
      $('#paciente_form_arrayDiagnosticos').addClass('select2')});
  &lt;/script&gt;
  </code></pre>
  
  <p>How do I properly attach the select2 css class?</p>