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.
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">
(whereacmebundle
is your bundle)