在 Symfony 中设置提交按钮的背景图片答案

【问题标题】：Setting background image of submit button in Symfony在 Symfony 中设置提交按钮的背景图片
【发布时间】：2014-06-07 10:59:19
【问题描述】：

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

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

感谢任何有关如何完成此操作的建议，在此先感谢！

【问题讨论】：

标签： php css symfony twig

【解决方案1】：

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

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

并在 CSS 中设置样式。

【讨论】：

感谢您的回复。但是按钮值会自动设置为“搜索”一词。我希望 ID/名称为“搜索”，但值为空，因此我可以设置背景图片。
跳过search这样的标签->add('', 'submit', arr(...)
您真的不想将值设置为空，因为屏幕阅读器将无法知道按钮的用途。
所以也许text-indent:-9000px; 应该完成这项工作
感谢您的回复。这最终运作良好。只是感觉有点hacky，仅此而已;）

【解决方案2】：

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

【讨论】：

感谢您的回复，但是“搜索”的按钮值仍然存在。这需要用 CSS / JavaScript 删除还是可以用 Symfony 完成？
我已经更新了 CSS，如果删除了搜索值，请告诉我。如果没有，您使用的是什么浏览器？你真的不想在 Symfony 中将值设置为空，因为屏幕阅读器将无法知道按钮的用途。

【解决方案3】：

像这样在pazulx的评论之外加个标签，

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

【讨论】：