How to change the color of an output text based on selected picklist value

Question

I have a picklist field.

When the field value is x, the color should be yellow. And when its value is y its color should be orange.

How to change the color of the output text based on picklist values in Salesforce? How do I implement this?

Answer 1

You can use the CASE formula on the output text's style attribute, like the following:

<apex:outputText
          value="{!Account.AccountSource}"
          style="color: {!CASE(Account.AccountSource, 'Web', '#f0f', '#000')}">
</apex:outputText>

This will turn the text pink when "Web" is selected as the Account Source.

Please remember to add a actionSupport tag to your picklist element so that the page can rerender when the option is changed, like this:

<apex:inputField id="field1" value="{!Account.AccountSource}">
    <apex:actionsupport event="onchange" rerender="mainform"/>
</apex:inputField>