How to add CSS classes to Zend_Form_Element_Select option

Question

Hi,

I'm trying to add a CSS class to a Zend_Form_Element_Select option, but I just can't find a way to do it.

The desired output would be something like this:

<select name="hey" id="hey">
    <option value="value1" style="parent">label1</option>
    <option value="value2" style="sibling">sublabel1</option>
    <option value="value3" style="sibling">sublabel2</option>
    <option value="value4" style="parent">label2</option>
    <option value="value5" style="sibling">sublabel3</option>
    <option value="value6" style="sibling">sublabel4</option>
</select>

But I'm getting this:

<select name="hey" id="hey">
    <option value="value1">label1</option>
    <option value="value2">sublabel1</option>
    <option value="value3">sublabel2</option>
    <option value="value4">label2</option>
    <option value="value5">sublabel3</option>
    <option value="value6">sublabel4</option>
</select>

I can't seem to pass a CSS class attribute to any of the options in the select element although I can style the select element itselft.

My code:

$sel = new Zend_Form_Element_Select('hey');
$sel->setRequired(true)->setLabel('Select an Option:');
$sel->addMultiOption('value1', 'label1', array('class' => 'parent'))
    ->addMultiOption('value2', 'sublabel1', array('class' => 'sibling')) (etc...);

After researching a bit I found out that Element_Select doesn't have a method for adding CSS styles to the options in the select box, only for the select itself.

So, how can I add them? Should I extend the form_element_select? Or would a custom decorator suffice? Can anyone give me a hint? I'm baffled with this.

Thanks in advance!

Answer 1

This is indeed not possible but already requested to be implemented:

See

• http://framework.zend.com/issues/browse/ZF-8684

Answer 2

You can add it with Javascript, specifically jQuery. This will result in the background of the select dropdown to be colored.

<style type="text/css">
    .t1 {background: red; color:#fff;}
</style>
<form>
    <select id="test">
        <option value="abc">ABC</option>
        <option value="123">123</option>
        <option value="foo">Foo</option>
    </select>

</form>

<script type="text/javascript">
$('#test [value*="abc"]').addClass('t1');
$('#test [value*="foo"]').addClass('t1');
</script>