Change color of apex:outputfield in a vfp for a lookup field in a fieldset

Question

I'm displaying a fieldset in the Community. The fieldset contains text, checkbox and lookup fields. So, I'm using the component to display the values from different data types. The issue is that the lookup fields are displayed in Royal blue color and I'm not able to change the color. I've researched for this and found similar questions, but not specifically for a lookup field.

    ...
    <style>
    .redcolor {
    color: red;
    }
    </style>
    ...
    <apex:outputPanel rendered="{!displayPanel}">
        <apex:repeat value="{!$ObjectType.Case.FieldSets.TestFieldSet}" var="fset" >
            <tr>
                <td><apex:outputText value="{!fset.label}" /></td>
                <td><span style="color: red;"><apex:outputField value="{!Case[fset]}" />
                </span></td>
            </tr>
        </apex:repeat>
    </apex:outputPanel>
    ...

What I have tried:

1. < apex:outputField value="{!Case[fset]}" Style="color:red"/>

   • No change in any fields

2. < apex:outputField value="{!Case[fset]}" StyleClass="redcolor"/>

   • No change in any fields
3. < span style="color: red;">< apex:outputField value="{!Case[fset]}" />< /span>
   • All field values appear in red color except lookup fields
4. < font color="red">< apex:outputField value="{!Case[fset]}" />< /font>
   • All field values appear in red color except lookup fields
5. When I use outputText, I can change the color of all field values, but, of course it shows the id for lookup and boolean value for checkbox

Is there any other way or it cannot be changed. Thanks

Answer 1

I have faced similar issue before. You can use Javascript to change the color. The Ids of elements in a fieldset are array (e.g. if you have 2 textboxes in a fieldset, Ids will be idOfParent[0] and idOfParent[1]). This means that you have to use jQuery as suggested by corp1645 to scan for elements (e.g. scan for labels of lookup fields) or you have to fix the location of the lookup and lose flexibility of fieldsets.

Answer 2

Since the output html code has the outputField value in <a> tag, I've changed the color using CSS.

<style type="text/css">
  a:link, a:visited {
  color: red;
  }
  ...
</style>