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

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;
        }

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.