jQuery UI API - CSS Framework

Below is a list of class names used by jQuery UI. These classes are used to create visual consistency across applications and allow components to be themed through jQuery UI ThemeRoller. The following CSS classes are defined in two files: ui.core.css and ui.theme.css, based on whether the style is fixed and structural, or themable (colors, fonts, backgrounds, etc.).

Layout Helpers

• .ui-helper-hidden: Applies display: none to the element.
• .ui-helper-hidden-accessible: Applies accessible hiding to the element (via absolute positioning on the page).
• .ui-helper-reset: Basic style reset for UI elements. Resets elements such as padding, margin, text-decoration, list-style, etc.
• .ui-helper-clearfix: Applies float wrapping properties to the parent element.
• .ui-helper-zfix: Applies the iframe "fix" CSS to <iframe> elements.
• .ui-front: Applies z-index to manage stacking of multiple widgets on the screen. For more details, see the Stacking Elements page.

Widget Containers

• .ui-widget: Class applied to the outer container of all widgets. Applies font and font size to the widget, and also applies the same font and 1em font size to form elements to address inheritance issues in Windows browsers.
• .ui-widget-header: Class applied to header containers. Applies header container styles to the element and its children's text, links, and icons.
• .ui-widget-content: Class applied to content containers. Applies content container styles to the element and its children's text, links, and icons. (Can be applied to the parent or sibling of a header)

Interaction States

• .ui-state-default: Class applied to clickable button elements. Applies "clickable default" container styles to the element and its children's text, links, and icons.
• .ui-state-hover: Class applied when the mouse hovers over clickable button elements. Applies "clickable hover" container styles to the element and its children's text, links, and icons.
• .ui-state-focus: Class applied when the keyboard focuses on clickable button elements. Applies "clickable hover" container styles to the element and its children's text, links, and icons.
• .ui-state-active: Class applied when the mouse clicks on clickable button elements. Applies "clickable active" container styles to the element and its children's text, links, and icons.

Interaction Cues

• .ui-state-highlight: Class applied to highlighted or selected elements. Applies "highlight" container styles to the element and its children's text, links, and icons.
• .ui-state-error: Class applied to error message container elements. Applies "error" container styles to the element and its children's text, links, and icons.
• .ui-state-error-text: Class applied for error text color without background. Can be used for form labels and also applies error icon color to child icons.
• .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. This means adding additional styles to an already styled element.
• .ui-priority-primary: Class applied to buttons with primary priority. Applies bold text.
• .ui-priority-secondary: Class applied to buttons with secondary priority. Applies normal weight text and a slight transparency to the element.

Icons

States and Images

• .ui-icon: Basic class applied to icon elements. Sets the size to a 16px square, hides internal text, and sets a background image for the "content" state sprite. Note:

Icon Types

After declaring the .ui-icon class, you can then declare a class describing the icon type. Typically, icon classes follow the syntax .ui-icon-{icon type}-{icon sub description}-{direction}.

For example, a triangle icon pointing to the right would look like this: .ui-icon-triangle-1-e jQuery UI's ThemeRoller provides a full set of CSS framework icons in its preview section. Hovering the mouse over the icons shows the class names.

Other Visual Effects

Rounded Corner Helpers

• .ui-corner-tl: Applies rounded corners to the top-left corner of the element.
• .ui-corner-tr: Applies rounded corners to the top-right corner of the element.
• .ui-corner-bl: Applies rounded corners to the bottom-left corner of the element.
• .ui-corner-br: Applies rounded corners to the bottom-right corner of the element.
• .ui-corner-top: Applies rounded corners to the top-left and top-right corners of the element.
• .ui-corner-bottom: Applies rounded corners to the bottom-left and bottom-right corners of the element.
• .ui-corner-right: Applies rounded corners to the top-right and bottom-right corners of the element.
• .ui-corner-left: Applies rounded corners to the top-left and bottom-left corners of the element.
• .ui-corner-all: Applies rounded corners to all four corners of the element.

Overlay & Shadow

• .ui-widget-overlay: Applies 100% width and height to the overlay, along with background color/texture and screen opacity.
• .ui-widget-shadow: The class applied to the overlay, setting opacity, top/left offset, and the "thickness" of the shadow. Thickness is applied by setting padding on all sides of the shadow. Offset is applied by setting top and left margins (which can be positive or negative).