将 css 放入 symfony2 的表单创建中

Question

我有一个问题。所以我有这个表格：

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $aColors = array();
    foreach(Colors::$aNewsColors as $k=>$v){
        $aColors['<div style="background-color:'.$v['textCategoryColor'].'">'.$v['name'].'</div>'] = $k;
    }
    $builder
        ->add('title', TextType::class)
        ->add('image',FileType::class, array('data_class' => null))
        ->add('document',FileType::class, array('data_class' => null))
        ->add('content',TextareaType::class)
        ->add('color_id',ChoiceType::class, array('choices' => $aColors,'choices_as_values' => true))
        ->add('is_top_news',CheckboxType::class)
        ->add('has_gallery',CheckboxType::class)
        ->add('save',SubmitType::class, array('label'=> 'Save'))
    ;
}

问题出在这个color_id，因为在表单中得到这样的select框：

<option value="1"><div style="background-color:rgb(174,252,202)">Green</div></option>
<option value="2"><div style="background-color:rgb(12,2,43)">Red</div></option>

因此不解释背景色。你能帮我吗？

Answer 1

你需要用到js。

我认为你可以循环 div 并给数据颜色属性提供必要的信息（id、颜色...）并检索 js 端

当您单击 select 时，您恢复了值（即 id），然后遍历了数据属性的所有 div 元素并找到了 id。

可见example.html.twig

{% for color in textCategoryColors %}
   <div data-color="{color | json_encode}"></div>
{% endfor %}

Answer 2

要事第一。 浏览器不解释背景颜色，因为它设置在 <div> <option> 中。

话虽如此，我同意其他人的看法，您应该使用 javascript 库。带有 <select> 标签的东西不一定看起来很漂亮。

但是您的问题需要一个实际的答案，事实证明，即使您使用 javascript 库，我建议的方法也会对您有所帮助。

要真正回答您的问题，请使用 'choice_attr'

$aColors = array();
$choiceAttr = array();
foreach(Colors::$aNewsColors as $k=>$v){
    $aColors[$v['name']]=$k;
    $choiceAttr[$v['name']]=array(
        'style'=>'background-color: ' . $v['textCategoryColor'].  ';',
    );
}
$builder
    ->add('title', TextType::class)
    ->add('image',FileType::class, array('data_class' => null))
    ->add('document',FileType::class, array('data_class' => null))
    ->add('content',TextareaType::class)
    ->add('color_id',ChoiceType::class, array(
        'choices' => $aColors,
        'choices_as_values' => true,
        'choice_attr'=>$choiceAttr,
    ))
    ->add('is_top_news',CheckboxType::class)
    ->add('has_gallery',CheckboxType::class)
    ->add('save',SubmitType::class, array('label'=> 'Save'))
;

这应该输出

<option value="1" style="background-color:rgb(174,252,202);">Green</option>
<option value="2" style="background-color:rgb(12,2,43);">Red</option>

如果您决定使用 javascript 库，您不仅限于在 'choice_attr' 中设置 "style"。 除了 "style" 属性外，您还可以使用 'choice_attr' 来设置 "class" 属性，或者您可以想出的任何属性（例如 "data-color-value"） .

将 css 放入 symfony2 的表单创建中

Put css inside creation of form in symfony2

php

symfony-forms

symfony