Styling Relevant and Non-relevant Controls

The result of the relevance rules that we've created is not actually to show and hide the controls, but rather to set a CSS pseudo-class on the controls. The pseudo-classes are :disabled and :enabled.

To hide all of our form controls when they are non-relevant (when their CSS pseudo-class is :disabled) we don't actually need to do anything, since the default CSS rule is:

  .pc-disabled
  {
    display          : none;
  }

Since this is formsPlayer's default we don't need to specify it in our stylesheets, but we're not limited just to showing and hiding controls, and we can use any CSS features. For example, if we would like to apply a yellow fade animation to controls as they become relevant, we can add the following to the list of style rules:

      .pc-enabled
      {
        -event-xforms-enabled : fx-Effect-Highlight();
      }
    </style>