0

How can i put some style on an <apex:selectOptions> tag on a Visualforce Page? I have to change the font color of the options depending on one param, for instance if the param goes from 1 to 5, the color has to be green , if the param goes from 6 to 10, it has to be orange, if it´s from 11 to 15 then red and so on and so on, so apparently it is not possible to put style on an <apex:selectOptions> tag so i wanna know if there´s another way to accomplish this.

Part of the vf page:

<div class="form-group">     
                        Select Priority:
                    <apex:selectList id="pr" multiselect="false" size="1" style="height:30px">
                        <apex:selectOptions value="{!projectStatuslist}"></apex:selectOptions>
                    </apex:selectList>&nbsp;&nbsp;
                    <!--Select Worker:
                      <apex:selectList id="wr" size="1" multiselect="false" style="height:30px"> 
                       <apex:selectOptions value="{!workerslist}" id="worker">
                        </apex:selectOptions> -->

                            <label for="wr">Select Worker:</label>
                                <apex:selectList id="wr" styleClass="form-control" style="color:blue" size="1" > 
                                <apex:selectOptions value="{!workerslist}" /></apex:selectList>
                        </div>
1

The apex:selectOptions component supports HTML pass-through attributes using the "html-" prefix. Therefore, you can use the html-style attribute on the apex:selectOptions component to call the HTML style attribute and conditionally set the CSS color property of the resulting option element.

Select Priority:
<apex:selectList id="pr" multiselect="false" size="1" style="height: 30px;">
    <apex:selectOptions value="{!projectStatuslist}" html-style="color: {!
        IF(AND(param >= 1, param <= 5),
            'green',
            IF(AND(param >= 6, param <= 10),
                'orange',
                IF(AND(param >= 11, param <= 15),
                    'red',
                    'inherit'
                )
            )
        )
    }">
    </apex:selectOptions>
</apex:selectList>
1
  • Ok thanks for the answer, but how can i do if the params has to come from the value showed in the Select Option itself, for instance each Select Option has a number and the number itself is the param how can i passed that param to the html-style attribute?? – Jesus De Abreu May 1 '19 at 14:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.