Overwrite Style from dependent picklist

Question

I have a style that I want to keep but it looks like the dependent picklist is only loaded after the controlling picklist has been picked, leaving some really strange Styling. I used a wrapper like this but it just creates a wrapper around the inputfield, which is really strange and ugly (see image below)

How can override the styling of the dependent picklist? (will I have to use some Javascript?)

Answer 1

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:

Answer 2

Usually this you can handle using css itself. Use inspect element option in modern browsers like chrome. It will show the final HTML content that is rendered in browser. Then you can apply styleClass Attribute to fields and inspect if the class is setting to the right element in the HTML as you wanted. Chrome developer tools let you modify css on the fly and see how it is affecting display.

Use Javascript as the final resort only. Most of the cases you can manage to do it in css itself. Before going for javascript try to use nth selector option also http://www.w3schools.com/cssref/sel_nth-child.asp