I'm trying to style my state picklist and it looks like the functionality that allows statecode/countrycode to be dependent on eachother is clobbering the styleClass that I specify. When I inspect the page after it loads, there is no class specified on the select element.

I think I can clobber it back with jQuery, but is there a better way to do that or is it a known issue?

<apex:page showHeader="true" sidebar="true" standardController="Contact">
        <apex:inputField value="{!Contact.MailingStateCode}" styleClass="testClass"/>
        <apex:inputField value="{!Contact.MailingCountryCode}"/> 
  • 1
    From the VF doc on inputField: The CSS style class used to display the inputField component. This attribute may not work for all values. If your text requires a class name, use a wrapping span tag. Key is the may not work for all values - try the span with class="testClass". – cropredy Apr 26 '15 at 18:57

My solution for this was:

<apex:page showHeader="true" sidebar="true" standardController="Contact">
var j$ = jQuery.noConflict();

j$(document).ready(function () {
    var obs = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var newNodes = j$(mutation.addedNodes).filter("[id$=stateInput]")
            if(newNodes.length > 0) {
                j$(newNodes[0]).prop('required', true);
    var config = {attributes: true, childList: true, characterData: true};
    obs.observe(j$("#stateDiv span")[0], config);


        <div id="stateDiv">
            <apex:inputField value="{!Contact.MailingStateCode}" id="stateInput"/>
        <apex:inputField value="{!Contact.MailingCountryCode}"/> 

Please note that I'm actually adding the "required" attribute, not a class in this solution code. Changing this to add a styleClass would be trivial. The core components of this solution are:

  1. An identifiable parent node for the <apex:inputField> tag. I used a <div> tag.
  2. The select tag gets wrapped inside of a <span> tag, so we need to select the <span> child of the parent <div> to watch with our mutationobserver.
  3. When a new select tag gets inserted, our callback method can modify it with whatever properties we want.

In the styleClass attribute you need to specify the css ClassName for which you have provided the definition inline or in a css (which you need to include in the page) or simply use the style attribute and provide inline style for example style="color:red;" works just fine.

In the below example you can see that styleClass="italicText" and the definition of .italicText is provided inline.

    <style type="text/css">
        .italicText { font-style: italic; }
    <apex:outputText styleClass="italicText" value="This is kind of fancy."/>

You could also refer to a className from a css file which is in the static resources. Check out more examples here.

  • I understand how to use CSS. Please see crop1645's comment on my question, it covers my issue. – frontendloader Apr 27 '15 at 13:38
  • Thats interesting! didnt know that would be the rootcause. – Rajiv Bhatt Apr 27 '15 at 13:39

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.