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.

Do you want on selection of <option> it's value be the class name? please make me clear — Gagan Gami
– Gagan Gami, Commented Sep 9, 2014 at 10:50
No, he just wants to add custom classes to specific option items in the list. — F.P
– F.P, Commented Sep 9, 2014 at 12:13
@Gagan As Florian Peschka wrote I want to add a CSS class, no selection or similar. — CSchulz
– CSchulz, Commented Sep 9, 2014 at 18:09
@CSchulz : I have post the answer and let me know is this what you were looking for? — Gagan Gami
– Gagan Gami, Commented Sep 22, 2014 at 6:28

CSchulz · Accepted Answer · 2014-10-07 14:00:12Z

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 7, 2014 at 14:00

CSchulz

11.1k11 gold badges63 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

userfuser Over a year ago

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

Community · Accepted Answer · 2017-05-23 12:00:25Z

1

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

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Sep 22, 2014 at 6:27

Gagan Gami

10.3k1 gold badge32 silver badges56 bronze badges

2 Comments

CSchulz Over a year ago

Yes it is the expected output, but I hoped I can do it via templating or similar. :) But thanks so far.

Gagan Gami Over a year ago

@CSchulz : if it helpful then you can accept the answer and upvote.. :)

Community · Accepted Answer · 2017-05-23 11:46:30Z

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, 2017 at 11:46

CommunityBot

11 silver badge

answered Sep 9, 2014 at 10:44

Ajeet Varma

7264 silver badges21 bronze badges

1 Comment

F.P Over a year ago

Wouldn't this add the same class to every option?

Collectives™ on Stack Overflow

How to add a css class to select option?

3 Answers 3

1 Comment

Working Demo

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related