如何在Symfony2中设置复选框的样式？

Question

我遇到了由FormBuilder呈现的复选框的问题。

问题是在<input/>内生成<label></label>。结果如下：

我不知道应该怎么做才能将此复选框格式化为图像右侧的状态。我检查文档，但我没有找到任何可以提供访问权限的方法来改变这些字段的呈现方式。

嫩枝：

{{ form_widget(form.colors, { 'attr': {'class': 'MY-CLASS'} } ) }}

HTML结果：

<div id="template_colors" class="MY-CLASS">
    <input type="checkbox" id="template_colors_0" name="template[colors][]" value="white">
    <label for="template_colors_0">White</label>

    <input type="checkbox" id="template_colors_1" name="template[colors][]" value="red">
    <label for="template_colors_1">Red</label>

    <input type="checkbox" id="template_colors_2" name="template[colors][]" value="black">
    <label for="template_colors_2">Black</label>
</div>

Answer 1

您可以通过多种方式更改复选框的呈现方式。我将向您展示最简单的一个（在示例中，我假设form.colors作为保存choice元素的变量）：

<div class="" style="display: inline-block;">
{% for color in form.colors %}
   <label class="check">
   {{ form_errors(color) }}
   {{ form_widget(color) }}
   <span>{{ color.vars.label }}</span>
   </label>
{% endfor %}
</div>

这将输出类似：

<div class="" style="display: inline-block;">
    <label class="check">
    <input type="radio" id="whatever" name="whatever" required="required" value="whatever" checked="checked">
    <span>Red</span>
    </label>
    <label class="check">
    <input type="radio" id="whatever" name="whatever" required="required" value="whatever" checked="checked">
    <span>Blue</span>
    </label>                        
</div>

但它只是一个例子，您可以按照自己喜欢的方式对其进行格式化。您也可以像往常一样将class属性传递给其中任何一个。

Answer 2

如果您希望拥有四个复选框的行，则类似于：

{# Wrap span around checkboxes #}
{{ form_label(form.fees) }}
{{ form_errors(form.fees) }}<br>
{% for batch in form.fees|batch(4) %}
    <div class="batchRow">
        {% for option in batch %}
            <div class="yourClassName">
                {{ form_label(option) }}
                {{ form_widget(option) }}
            </div>
        {% endfor %}
    </div>
{% endfor %}

否则你可以摆脱批量水平。

Answer 3

这更像是一个CSS问题。如果输入在标签内，您可以轻松地将所有内容放入内嵌。以下是Bootstrap用于执行此操作的代码： https://github.com/twbs/bootstrap/blob/master/less/forms.less#L210。

如果您想在表单上使用Bootstrap样式，可以使用Symfony中的Bootstrap form theme。

如果要自定义某个字段类型及其呈现方式，可以为其创建表单主题。以下是有关详细信息：http://symfony.com/doc/current/cookbook/form/form_customization.html#what-are-form-themes

希望有所帮助