我不想有一个写着"搜索"的基本提交按钮,而是想将按钮的背景图像设置为搜索图标的图像。我不知道该怎么做,因为整个表单在控制器中设置如下:
$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();
我目前正在用Twig:呈现我的Symfony表单
<div class="searchFormWrapper">
{{ form(form) }}
</div>
我也尝试过,但它渲染了整个按钮搜索按钮,不允许我设置背景图像:
{{ form_widget(form.q) }}
{{ form_widget(form.search) }}
我很感激任何关于如何做到这一点的建议,提前谢谢!
您可以通过以下方式向该按钮添加CSS类:
->add('search', 'submit', array(
'attr' => array('class' => 'my-custom-button-class'))
)
并在CSS中设置样式。
您需要使用CSS对其进行样式设置。例如:
<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>
在pazulx的评论之外添加一个标签,比如
->add('search', 'submit', array(
'label' => 'My label',
'attr' => array('class' => 'my-custom-button-class'))
)