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

Question

我在使用 FormBuilder 呈现的复选框时遇到问题。

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

我不知道应该如何将此复选框的格式设置为图像右侧的状态。我检查了文档，但没有找到任何可以访问以更改此字段呈现方式的方法。

树枝：

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

这更像是一个 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

希望对您有所帮助

Answer 2

您可以通过多种方式更改复选框的呈现方式。我将向您展示最简单的一个（在示例中，我假设 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 3

如果您想要一行四个复选框，则类似于：

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

否则可以去掉batch level

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

How to set styles for checkboxes in Symfony2?

checkbox

symfony

twig

symfony-2.3