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

我对FormBuilder渲染的复选框有问题

问题是

是在

内部生成的。结果如下：

我不知道该如何将此复选框格式化为图像右侧的状态。我查看了文档，没有找到任何方法可以更改这些字段的呈现方式

细枝：

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>

白色
红色
黑色

这更像是一个CSS问题。如果输入在标签内，则可以轻松地将所有内容内联放置。下面是Bootstrap用于实现此目的的代码： .

如果要在窗体上使用引导样式，可以使用in-Symfony

如果要自定义某个字段类型及其呈现方式，可以为此创建表单主题。以下是关于这方面的更多细节：

---

希望它能有所帮助，这更像是一个CSS问题。如果输入在标签内，则可以轻松地将所有内容内联放置。下面是Bootstrap用于实现此目的的代码： .

如果要在窗体上使用引导样式，可以使用in-Symfony

如果要自定义某个字段类型及其呈现方式，可以为此创建表单主题。以下是关于这方面的更多细节：

---

希望对您有所帮助

您可以通过多种方式更改复选框的呈现方式。我将向您展示最简单的一个（在本例中，我假设

form.colors

作为保存

选项

元素的变量）：

{%用于form.colors%}
{{form_errors（color）}}
{{form_widget（color）}
{{color.vars.label}
{%endfor%}

这将输出如下内容：

<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>

{# 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 %}

红色
蓝色

---

但这只是一个例子，你可以按你喜欢的方式格式化它。您还可以像往常一样将

类

属性传递给它们中的任何一个。

您可以通过多种方式更改复选框的呈现方式。我将向您展示最简单的一个（在本例中，我假设

form.colors

作为保存

选项

元素的变量）：

{%用于form.colors%}
{{form_errors（color）}}
{{form_widget（color）}
{{color.vars.label}
{%endfor%}

这将输出如下内容：

<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>

{# 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 %}

红色
蓝色

---

但这只是一个例子，你可以按你喜欢的方式格式化它。您还可以像往常一样将

类

属性传递给它们中的任何一个。

如果您希望有四行复选框，这将类似于：

<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>

{# 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 %}

{#在复选框周围环绕span}
{{表格标签（表格费用）}
{{表格错误（表格费用）}}

{表格中批次费用的百分比|批次（4）%}
{批处理%中选项的%s}
{{form_标签（选项）}}
{{form_小部件（选项）}
{%endfor%}
{%endfor%}

---

否则，您可以取消批处理级别。

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

<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>

{# 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 %}

{#在复选框周围环绕span}
{{表格标签（表格费用）}
{{表格错误（表格费用）}}

{表格中批次费用的百分比|批次（4）%}
{批处理%中选项的%s}
{{form_标签（选项）}}
{{form_小部件（选项）}
{%endfor%}
{%endfor%}

---

否则，您可以取消批处理级别。

您的解决方案很棒，但它只适用于复选框和收音机。那么列表呢（当选项

expanded=false

和

multiple=false

时）？我试过你的方法，但似乎不起作用。你的解决方案很好，但它只适用于复选框和收音机。那么列表呢（当选项

expanded=false

和

multiple=false

时）？我试过你的方法，但似乎不管用。