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 Answer 1

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?? Commented May 1, 2019 at 14:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .