Put css inside creation of form in symfony2 - php

Question

I have a question. So I have this form :
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'))
;
}
The problem is in this color_id, because in the form a get the select box like this :
<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>
So the background-color is not interpreted. Can you help me please ?

Answer 1

First things first. The background color is not interpreted by the browser because it's set on a <div> inside an <option>.
With that said, I agree with other people, you should use a javascript library. Things won't necessarily look pretty with a <select> tag.
But your question needs an actual answer, and it turns out that even if you use a javascript library, the approach I'll suggest will help you.
To actually answer your question, make use of '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'))
;
This should output
<option value="1" style="background-color:rgb(174,252,202);">Green</option>
<option value="2" style="background-color:rgb(12,2,43);">Red</option>
And if you do decide to go for a javascript library, you are not limited to setting a "style" in 'choice_attr'. In addition to the "style" attribute, you can use 'choice_attr' to set the "class" attribute, or any attribute you can come up with (E.g. "data-color-value").

Answer 2

You will need to use js.
I think you can loop the div and give a data-color attribute with the necessary information (id, color ...) and retrieve js side
When you click on the select you recovered the value (which is the id) and you course all the div element of the data attribute and find the id.
In view example.html.twig
{% for color in textCategoryColors %}
<div data-color="{color | json_encode}"></div>
{% endfor %}