jQuery UI API - CSS Framework

The following 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 viajQuery UI ThemeRollertheming. The CSS classes below are defined in the two files ui.core.css and ui.theme.css, depending on whether the styles are fixed/structural or themeable (colors, fonts, backgrounds, etc.).

Layout Helpers

  • .ui-helper-hidden: Applies to elementsdisplay: none。
  • .ui-helper-hidden-accessible: Applies accessibility hiding to elements (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 wrapper properties to the parent element.
  • .ui-helper-zfix: Applies to<iframe>elements the iframe "fix" CSS.
  • .ui-front: Applies z-index to manage the stacking of multiple widgets on the screen. For more details, see theStacking Elementspage.

Widget Containers

  • .ui-widget: Class applied to the outer container of all widgets. Applies font and font size to widgets, and also applies the same font and a 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 text, links, and icons of the element and its child elements.
  • .ui-widget-content: Class applied to content containers. Applies content container styles to the text, links, and icons of the element and its child elements. (Can be applied to the parent or sibling elements of the header.)

Interaction States

  • .ui-state-default: Class applied to clickable button elements. Applies the "clickable default" container style to the text, links, and icons of the element and its child elements.
  • .ui-state-hover: Class applied when the mouse hovers over a clickable button element. Applies the "clickable hover" container style to the text, links, and icons of the element and its child elements.
  • .ui-state-focus: Class applied when a clickable button element receives keyboard focus. Applies the "clickable hover" container style to the text, links, and icons of the element and its child elements.
  • .ui-state-active: Class applied when a clickable button element is clicked with the mouse. Applies the "clickable active" container style to the text, links, and icons of the element and its child elements.

Interaction Cues

  • .ui-state-highlight: Class applied to highlighted or selected elements. Applies the "highlight" container style to the text, links, and icons of the element and its child elements.
  • .ui-state-error: Class applied to error message container elements. Applies the "error" container style to the text, links, and icons of the element and its child elements.
  • .ui-state-error-text: Class applied for error text color only, without a background. Can be used on form labels, and can also apply the error icon color to child icons.
  • .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. This means adding extra styling to an element that already has defined styles.
  • .ui-priority-primary: Class applied to primary priority buttons. Applies bold text.
  • .ui-priority-secondary: Class applied to secondary priority buttons. Applies normal-weight text and a slight opacity to the element.

Icons

States and Images

  • .ui-icon: Basic class applied to icon elements. Sets the size to a 16px square, hides inner text, and sets the background image for the sprite image in the "content" state.Note: .ui-iconThe class will get a different sprite background image based on its parent container. For example,ui-state-defaultelements within aui-iconcontainer will be colored according to theui-state-defaulticon color.

Icon Types

After declaring the.ui-iconclass, 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 looks like this:.ui-icon-triangle-1-e

jQuery UI'sThemeRollerTheme Gallery provides a full set of CSS framework icons in its preview column. Hover over an icon to view the class name.

Other Visual Effects

Corner Radius Helpers

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

Overlays & Shadows

  • .ui-widget-overlay: Applies 100% width and height to the overlay screen, while setting the background color/texture and screen opacity.
  • .ui-widget-shadow: Class applied to overlays, setting the opacity, top/left offsets, and the "thickness" of the shadow. The thickness is applied by setting padding on all sides of the shadow. The offsets are applied by setting top margin and left margin (which can be positive or negative).
Other Extensions