You can add a CSS class to that button by:
->add('search', 'submit', array(
'attr' => array('class' => 'my-custom-button-class'))
)
and style it in CSS.
質問
Instead of having a basic submit button that reads 'Search', I would like to set a background image of the button to an image of a search icon. I am not sure how to go about it because the entire form is set up in the controller as follows:
$form = $this->get('form.factory')->createNamedBuilder('', 'form', $search, array('csrf_protection' => false, 'attr' => array('class' => 'searchForm')))
->setAction($this->generateUrl('_search'))
->setMethod('GET')
->add('q', 'text', array('label'=>false, 'required' =>false))
->add('search', 'submit')
->getForm();
And I am currently rendering my Symfony form with Twig:
<div class="searchFormWrapper">
{{ form(form) }}
</div>
I also tried this, however it renders the entire button search button and doesn't allow me to set the background image:
{{ form_widget(form.q) }}
{{ form_widget(form.search) }}
I appreciate any advice on how to accomplish this, thanks in advance!
解決
You can add a CSS class to that button by:
->add('search', 'submit', array(
'attr' => array('class' => 'my-custom-button-class'))
)
and style it in CSS.
他のヒント
You will need to style it using CSS. E.g:
<style type="text/css">
.searchFormWrapper button {
display: inline-block;
width:100px;
height:40px;
background:url('PATH TO YOUR IMAGE') top left no-repeat;
text-indent:-9000px;
text-transform: capitalize;
line-height: -9999px;
overflow:hidden;
}
</style>
Add a label in addition to pazulx's comment like so,
->add('search', 'submit', array(
'label' => 'My label',
'attr' => array('class' => 'my-custom-button-class'))
)