Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Styling UI elements based on their state

Updated on June 30, 2017

You can alter the display format of a control or component on forms in response to user actions in the browser to guide the user to the next action. For example, an input field can be highlighted when the cursor is placed inside the field to indicate that the user needs to provide input in the field.

You can style the following controls or components based on their style:

  • Text input and formatted text
  • Buttons
  • Links
  • Drop-down menus
  • Radio buttons (even when styled as segmented buttons)
  • Layout groups
  • Container headers

You can style the controls or components by using the options on the application skin form.

  1. In the Designer Studio header, click your application name, and then click Skin.
  2. On the Components tab, select the control or component that you want to style.
  3. Select the style format to view the styling options. For layout groups, the style options are on the Tab Styling tab.
  4. Under the <control> states section, select the state for which you want to style the control or component. You can select one of the following styles:
  • Auto– Select this option to apply the predefined styles for the control in this state. These predefined styles are applied according to system-defined logic and cannot be modified.
  • Default– Select this option to apply the browser-defined styles instead of the default or custom styles that are available in the application.
  • Custom – Select this option to define your own styles for the element in this state.
  • Use same styles for hover, focus and active – Select this check box to use the same style for all the states.
  1. Click Save.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us