How to add a css class to select option?

Question

I am trying to add some CSS classes to specific options of my select.

It is no problem to add it to the select itself with the attr:

'attr'=>array('style'=>'width:300px', 'class'=>'class'),

But I want to add the class to the options itself:

<select name="select">
   <option class="x" value="1">red</option>
   <option value="2">blue</option>
   <option class="y" value="3">green</option>
</select>

I haven't found any way, yet. I investigated already the ChoiceType and the ChoiceList implementations.

My favorite way would be to add them on server side.

Thanks for any hints.

No, he just wants to add custom classes to specific option items in the list. — F.P, Sep 09 '14 at 12:13
@Gagan As Florian Peschka wrote I want to add a CSS class, no selection or similar. — CSchulz, Sep 09 '14 at 18:09
@CSchulz : I have post the answer and let me know is this what you were looking for? — Gagan Gami, Sep 22 '14 at 06:28

score 3 · Accepted Answer · answered Oct 07 '14 at 14:00

3

Finally the solution I am waiting for will be implemented in 2.7 (source).

choice_attr

Returns the additional HTML attributes for choices. Can be an array, a callable (like for "choice_label") or a property path. If an array, the key of the "choices" array must be used as keys.

// array
$builder->add('attending', 'choice', array(
    'choices' => array(
        'Yes' => true,
        'No' => false,
        'Maybe' => null,
    ),
    'flip_choices' => true,
    'choice_attr' => array(
        'Maybe' => array('class' => 'greyed-out'),
    ),
));

answered Oct 07 '14 at 14:00

CSchulz

10,882
11
60
114

In Symfony 3, this still works, but it is interesting how it's given in the Docs: "This can be an array of attributes (**if they are the same for each choice**)"... so it seems like you could use one and the same entry in this array, for setting up a value for all choices. But then, 1 line lower it commands that "the keys of the choices array **must be used as keys**". I'd expect that - if you always want the same class for all choices - you could just use *'choice_attr' => ['class' => 'sameclass']* – userfuser Sep 28 '16 at 08:46

score 1 · Answer 2 · edited May 23 '17 at 12:00

I am not sure what you are looking for but as I understood via Florian Peschka's comment that you wanted to add custom class to specific(particular) option then here is what I tried..

JQuery

$('select>option:eq(1)').addClass("custom_class");

Here eq() method : Reduce the set of matched elements to the one at the specified index. Just like Array it's index starts from 0 so if you wanted to select second option then write eq(1).

In above code I have added custom_class to second option..

HTML:

<select name="select">
   <option class="x" value="1">red</option>
   <option value="2">blue</option>  # suppose you wanted to add custom class in this option
   <option class="y" value="3">green</option>
</select>

Which will now be looks like

<option class="custom_class" value="2">blue</option>

Working Demo

To check in demo you can right click on drop-down and select Inspect element with firebug. enter image description here

If this is not what you are looking for then please update your question with your Expected output..with description

Yes it is the expected output, but I hoped I can do it via templating or similar. :) But thanks so far. — CSchulz, Sep 22 '14 at 08:32
@CSchulz : if it helpful then you can accept the answer and upvote.. :) — Gagan Gami, Sep 22 '14 at 08:33

score 0 · Answer 3 · edited May 23 '17 at 11:46

0

You will have to override the layout of specific widgets in your form . see the example How can I add css classes to specific symfony2 form choices?

edited May 23 '17 at 11:46

Community

1
1

answered Sep 09 '14 at 10:44

Ajeet Varma

726
4
20

Wouldn't this add the same class to every option? – F.P Sep 09 '14 at 12:13

How to add a css class to select option?

3 Answers3

Working Demo