Setting color for multiselect picklist

Question

EDIT:Sorry for not specifying this critical part. I want this to be done on a Multi select picklist on standard salesforce *(even if it means hacking the side row by adding a dummy component) and not a VF Page. from the doc : https://login.salesforce.com/help/doc/en/updating_picklists.htm I know this is not possible out of box. Is there a way to use CSS to make chosen values of a multiselect picklist bold from the available options?

Chart colors aren't available for multi-select picklists, currency picklists, or Task Subject, Event Subject, Knowledge Validation Status, and Opportunity Competitor picklists.

eg:

Value 1 bucket

value_1.0

value_1.1

Value 2 bucket

value_2.0

value_2.1

Answer 1

The keyword here is the setEscapeItem(false) of the SelectOption class. In my example i will generate an option group styled with css and some colored options. There is a bug if you trying to insert unescaped html tag into the selectOption list. The visualforce adds empty values, that must be removed with some simple javascript:

Controller:

public List<SelectOption> getPicklistValues(){
    List<SelectOption> options = new List<SelectOption>();    

    // Reading picklist values
    Schema.DescribeFieldResult fieldResult = Test1__c.TestPicklist__c.getDescribe();
    List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();

    // Adding an iption group
    SelectOption group = new SelectOption('1', '<optgroup label="Group 1" style="background:#eaeaea;"></optgroup>');
    group.setEscapeItem(false);
    options.add(group);

    // Now adding colored values
    String color;
    for(Schema.PicklistEntry f : ple){
        if(f.getValue() == '2'){
            color = 'red';
        }
        else{
            color = 'green';
        }

        SelectOption entry = new SelectOption(f.getValue(),'<option value="' + f.getValue() + '" style="font-weight:bold;color:' + color + ';">' + f.getLabel() + '</option>'); 
        entry.setEscapeItem(false);
        options.add(entry);
    }
    return options;
}

Visualforce page. Here we must remove empty options that was generated with apex:

<apex:selectList multiselect="false" value="{!selectedValue}" style="width:100px;" size="1" id="picklist">
    <apex:selectOptions value="{!PicklistValues}"/>
</apex:selectList>

<script>
    // Removing empty options
    var entries = document.getElementById('{!$Component.picklist}');
    for (var i = entries.length - 1; i>=0; i--){
        if (entries.options[i].text == ''){
            entries.remove(i);
        }
    }
</script>

And here is the result:

Answer 2

This would definitely have to be custom. To do this, you would need to repeat over a List<SelectOption> using an <apex:repeat> to generate out a list of <apex:selectOption> while inside an <apex:selectList>. Unfortunately, <apex:selectOption> had style and styleClass deprecated in API 17, so the only way to apply the proper formatting is by injecting HTML into the value and ensuring the HTML is not escpaed (which it should not be by default). Now, for this, you can either do this as part of your Visualforce or do this in your controller. If you do this in your controller, you can just use the <apex:selectOptions>. I would probably do it as part of the controller since it would be a bit easier.

...

public List<SelectOption> getOptions(){
    List<SelectOption> options = new List<SelectOption>();
    options.add(1, '<span style="font-weight:bold;">Value 1 bucket</span>');
    options.add(2, 'Value 1.0');
    options.add(3, 'Value 1.1');
    options.add(4, '<span style="font-weight:bold;">Value 2 bucket</span>');
    options.add(5, 'Value 2.0');
    options.add(6, 'Value 2.1');

    return options;
}

...

---

...

<apex:selectList multiselect="true" size="4">
    <apex:selectOptions value="{!options}"/>
</apex:selectList>

...

---

With all of that said, I would suggest maybe considering a dependent picklist. Allow your users to select the grouping as one picklist and then only display their available options based on that selection in a multi-picklist after their selection. This will bypass custom coding a solution.