Add CSS to Form Type is Symfony2 Add CSS to Form Type is Symfony2 symfony symfony

Add CSS to Form Type is Symfony2


Here is the way you can do it when building your form,

 $builder->add('field_name', 'text', array('label' => 'Field Label', 'attr' => array('class' => 'fieldClass')));

You can also do it when rendering your form fields, take a look at Twig template form function reference

{{ form_label(form.field, 'label', { 'attr': {'class': 'foo'} }) }}{{ form_widget(form.field, { 'attr': {'class': 'bar'} }) }}

You can then add a css file in your bundle public assets and call it in your template using,

{% block stylesheets %}    {% parent() %} {# if you want to keep base template's stylesheets #}    <link href="{{ asset('bundle/myBundle/css/stylesheet.css') }}" type="text/css" rel="stylesheet" />{% endblock %}

You've then to make your public assets be accessible through your web/ directory.The best way to do it is to create symbolic links targeting your bundle public assets, you've then to execute

assets:install web/ --symlink

Another useful approach when you want to thoroughly customize specific form field rendering block (Twig) is to define a new form theme, here's the documentation > Form theming in Twig.


This might help:

$builder->add('patent_name', 'text', array('label' => 'Patent Name', 'attr' => array('class' => 'someclass')));


If you want to add class to your fields, you have to use attr special attribute with your build form's add action in that way

$builder->add('field_name', 'yourType', array('attr' => array('class' => 'fieldClass')));

If you want to link your style sheet instead, you have to use assets.
You can find more on assets here

To work with assets you have to do:

  • create your css file
  • install your assets with assets:install (I suggest to use --symlink option that will reflect css changes unless they are cached)
  • enjoy your CSS by using it into your template. In case of twig, you have do to <link href="{{ asset('bundles/acmebundle/css/style.css') }}" type="text/css" rel="stylesheet"> (where acmebundle is your bundle)