It seems that Salesforce removes all assigned style classes from the dependent picklists. Well, we have to fix it with some javascript tricks. The idea is to re-assign a style class to the dependent picklist after it structure was changed (ie. attributes removed, child elements added).
For that we will use a cool technique with a "MutationObserver" object. Using it we will be able to catch every DOM change on the target element. For example if a "class" attribute removed from the element - re-assign it again.
First define a style class for the picklist. To keep it simple I'll use only a background color "green":
<style>
/* Style class for picklists */
.myListClass {
background-color: green;
}
</style>
Then add both picklists to the page. A dependent picklist should be wrapped with some DIV element with an ID and used as a target element for the observer:
<!-- Master and dependent picklists -->
<apex:inputField value="{!acc.MasterList__c}" styleClass="myListClass" />
<div id="selectList">
<apex:inputField value="{!acc.ChildList__c}" styleClass="myListClass dependentElement"/>
</div>
Now add a MutationObserver object, a target element (dependent picklist wrapper with an id "selectList") and observer itself.:
<!-- This script should be added AFTER picklists on the page -->
<script>
// Mutation object
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
// Defining observer
var observer = new MutationObserver(function(mutations) {
// If the myListClass was removed from the list - re-assign it
if(!jQuery('#selectList select').first().hasClass('myListClass')){
jQuery('#selectList select').first().addClass('myListClass');
}
});
// A target object fot the observer
var myNode = document.querySelector('#selectList');
// Assigning observer to the dependent picklist
observer.observe(myNode, {
childList: true,
subtree: true,
attributes: true
});
</script>
And the result will look like:
