Question

我想要将按钮的背景图像设置为搜索图标的图像，而不是使用基本的提交按钮来搜索“搜索”。我不知道该怎么做，因为整个表单在控制器中设置如下：

$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) }}

我很感激有关如何实现这一目标的任何建议，谢谢！

Answer 1

您可以通过以下方式将CSS类添加到该按钮：

->add('search', 'submit', array(
    'attr' => array('class' => 'my-custom-button-class'))
)

并在CSS中设置样式。

Answer 2

您需要使用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>

Answer 3

除了pazulx的评论之外还添加标签，

->add('search', 'submit', array(
    'label' => 'My label',
    'attr' => array('class' => 'my-custom-button-class'))
)

在Symfony中设置提交按钮的背景图像

3 个答案: