Classes

Description: CSS classes for common styles

Style Classes

jQuery Mobile uses the following style classes:

ui-corner-all	Adds rounded corners to the element.
ui-shadow	Adds an item shadow around the element.
ui-overlay-shadow	Adds an overlay shadow around the element. The intended effect is for the element to appear to float above other elements.
ui-mini	Reduces the font size and scales down paddings proportionally to produce a miniature version of the element for use in toolbars and tight spaces.

These classes can be applied any of the framework's widgets.

Widget-specific classes

ui-collapsible-inset	The collapsible widget has horizontal margins, borders, and rounded corners when this class is applied.
ui-listview-inset	The listview widget has horizontal margins, borders, and rounded corners when this class is applied.

Button-specific classes

In addition to the style classes, you can add the following classes to a (anchor) and button elements to render them touch-friendly:

Basic options
ui-btn	You must add this class to indicate that the element is to be styled as a button. This is a prerequisite for adding any other button-related classes.
ui-btn-inline	Displays the button inline. This means that it will only consume as much space as is needed for the label. This allows you to place buttons side by side, flowing with the text.
ui-shadow-icon	Draws a shadow around the icon.
Icon positioning
ui-btn-icon-top	The icon appears above the text
ui-btn-icon-right	The icon appears to the right of the text
ui-btn-icon-bottom	The icon appears below the text
ui-btn-icon-left	The icon appears to the left of the text
ui-btn-icon-notext	The button text is suppressed, and only the icon is shown. The result is a circular button the size of the icon.
Theme
ui-btn-[a-z]	Sets the color scheme (swatch) for the button. Use a single letter from a-z that maps to the swatches included in your theme. For example: `ui-btn-b`

Icon classes

Icons are used by a variety of widgets. The table below lists all the available icon classes. The widgets which support an icon usually have an option named "icon". The value for that option is the name of the icon, which is appended to the prefix ui-icon- to create the icon class name. In the class list below, the icon names are emphasized as part of the icon class name.

ui-icon-alert	An exclamation mark inside a triangle.
ui-icon-arrow-l	An arrow pointing left (←).
ui-icon-arrow-r	An arrow pointing right (→).
ui-icon-arrow-u	An arrow pointing up (↑).
ui-icon-arrow-d	An arrow pointing down (↓).
ui-icon-back	A curved arrow arcing counterclockwise upwards.
ui-icon-bars	Three horizontal bars one above the other.
ui-icon-carat-b	A carat pointing down (v).
ui-icon-carat-l	A carat pointing left (<).
ui-icon-carat-r	A carat pointing right (>).
ui-icon-carat-t	A carat pointing up (^).
ui-icon-check	A checkmark (✓).
ui-icon-delete	A diagonal cross similar to (✕).
ui-icon-edit	A pencil - similar to (✎) but pointing to the lower left.
ui-icon-forward	A curved arrow arcing clockwise upwards.
ui-icon-gear	A gear (⚙).
ui-icon-grid	A 3✕3 grid.
ui-icon-home	A house similar to (⌂).
ui-icon-minus	A "minus" sign (-).
ui-icon-plus	A "plus" sign (+).
ui-icon-refresh	A circular arrow similar to (⟳).
ui-icon-search	A magnifying glass.
ui-icon-star	A star similar to (✭).

Theme-related classes

The class prefixes in the table below are used for applying a swatch to various parts of the user interface. The actual class name is constructed by appending the swatch letter (a-z) to the prefix. For example, the class ui-body-a is the swatch applied to the page.