2

Is there anyway to add the custom style for dependent picklist in viusalforce page?
I have created the visualforce page with custom style dependent picklist .
But it works for only contolling field not for depending field
My code as follows:

<apex:page standardController="Contact" standardStylesheets="false" showHeader="false">   
<head>   
    <style>   
        .picklist {
            height:33px;
            width:255px;
            font-size:14px;
            font-style:italic;
            font-weight:bold;
            text-align:left;
            padding-top:7px;
            padding-bottom:7px;
            padding-left:10px;
            border: 0;
        }
    </style>
</head>
<body>
    <apex:form >
        <!-- Parent picklist -->
        <apex:inputField id="parent" value="{!Contact.Country__c}" styleClass="picklist" style="left:400px; top:250px;"/>
        <div  class="picklist">
            <apex:inputField id="children" value="{!Contact.State__c}"/>
        </div>
    </apex:form>
</body>
</apex:page>

2 Answers 2

1

First I thought, the answer is similar to what I have written here

Custom Style for multiselect picklist

However it is quite simpler and in my opinion the code you have provided should work.

BUT Salesforce seem to have a rendering issue for dependent picklists as the styleClass attribute seems to respected in controlling fields but be ignored in dependent fields, e.g.

    <apex:form>
        <apex:inputField  styleClass="picklist"  value="{!contact.country__c}"></apex:inputField>
        <apex:inputField  styleClass="picklist"  value="{!contact.state__c}"></apex:inputField>
    </apex:form>

Both picklists (represented by <select> tags in the markup) should render the same html class. I was not able to find any hint that styleClass it not supported in this case. But the result is not as expected:

enter image description here

But fortunately it seems not too hard to fix it with a small workaround. My recommendation is to simply wrap it up into a div like this:

    <apex:form>
        <div class="wrapper">
            <apex:inputField  value="{!contact.country__c}"></apex:inputField>
            <apex:inputField  value="{!contact.state__c}"></apex:inputField>
        </div>
    </apex:form>

And use .wrapper select as selector for your CSS

Btw for you use case there is a way to get picklist into the standard address fields https://help.salesforce.com/apex/HTViewHelpDoc?id=admin_state_country_picklists_overview.htm&language=en_US

0

Just add this to the Style tag it will give you the exactly the same look and feel of lightning

<apex:slds />
    </head>
    <style>

        select {
            height:33px;
            width:180px;
            font-size:14px;
            font-style:italic;
            font-weight:bold;
            text-align:left;
            padding-top:7px;
            padding-bottom:7px;
            padding-left:10px;
            border: 0;
            border-radius: 4.0px;
            border: 0.5px solid #dddbda;
        }

You must log in to answer this question.

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