jQuery Mobile CSS Classes
jQuery CSS Classes
jQuery Mobile uses CSS classes to style different elements.
The following list contains common CSS styles:
Global Classes
The following classes can be used in jQuery Mobile widgets (buttons, toolbars, panels, tables, lists, etc.):
| Class | Description |
|---|---|
| ui-corner-all | Adds rounded corners to the element |
| ui-shadow | Adds a shadow to the element |
| ui-overlay-shadow | Adds a multi-layer shadow to the element |
| ui-mini | Makes the element smaller |
Button Classes
In addition to global classes, you can add the following classes to <a> or <button> elements (not <input> buttons):
| Class | Description | |
|---|---|---|
| ui-btn | Adds to <a> elements and displays them as buttons |
|
| ui-btn-inline | Displays buttons on the same line | |
| ui-btn-icon-top | Positions the icon above the button text | |
| ui-btn-icon-right | Positions the icon to the right of the button text | |
| ui-btn-icon-bottom | Positions the icon below the button text | |
| ui-btn-icon-left | Positions the icon to the left of the button text | |
| ui-btn-icon-notext | Displays only the icon | |
| ui-btn-a | b | Specifies the button theme. "a" is the default (gray background with black text), "b" changes the color to black background with white text |
Icon Classes
All available icon classes can be used on <a> and <button> elements (see jQuery Mobile Icon Reference for how to use on other elements):
| Class | Icon Description | Icon |
|---|---|---|
| ui-icon-action | Action (commonly used for page navigation) | |
| ui-icon-alert | Exclamation mark inside a triangle | |
| ui-icon-audio | Speaker/sound | |
| ui-icon-arrow-d-l | Down-left arrow | |
| ui-icon-arrow-d-r | Down-right arrow | |
| ui-icon-arrow-u-l | Up-left arrow | |
| ui-icon-arrow-u-r | Up-right arrow | |
| ui-icon-arrow-l | Left arrow | |
| ui-icon-arrow-r | Right arrow | |
| ui-icon-arrow-u | Up arrow | |
| ui-icon-arrow-d | Down arrow | |
| ui-icon-back | Back | |
| ui-icon-bars | Three horizontal lines, commonly used for list button icons | |
| ui-icon-bullets | Used for list button icons | |
| ui-icon-calendar | Calendar | |
| ui-icon-camera | Camera | |
| ui-icon-carat-d | Downward sliding icon | |
| ui-icon-carat-l | Leftward sliding icon | |
| ui-icon-carat-r | Rightward sliding icon | |
| ui-icon-carat-u | Upward sliding icon | |
| ui-icon-check | Checkmark | |
| ui-icon-clock | Clock | |
| ui-icon-cloud | Cloud | |
| ui-icon-comment | Comment/message | |
| ui-icon-delete | Delete | |
| ui-icon-edit | Edit/pencil | |
| ui-icon-eye | Eye | |
| ui-icon-forbidden | Forbidden sign | |
| ui-icon-forward | Undo (go back one step) | |
| ui-icon-gear | Gear, commonly used for settings button icon | |
| ui-icon-grid | Grid | |
| ui-icon-heart | Heart, can be used for article favorites | |
| ui-icon-home | Home | |
| ui-icon-info | Information | |
| ui-icon-location | Location | |
| ui-icon-lock | Lock | |
| ui-icon-mail | Mail/envelope | |
| ui-icon-minus | Minus sign | |
| ui-icon-navigation | Navigation | |
| ui-icon-phone | Phone | |
| ui-icon-power | Switch (On/off) | |
| ui-icon-plus | Plus sign | |
| ui-icon-recycle | Recycle symbol | |
| ui-icon-refresh | Refresh | |
| ui-icon-search | Search/magnifying glass | |
| ui-icon-shop | Shop/shopping bag | |
| ui-icon-star | Star | |
| ui-icon-tag | Tag | |
| ui-icon-user | User/person | |
| ui-icon-video | Video/camera |
Theme Classes
jQuery Mobile provides two theme classes: a (gray) and b (black). However, you can create your own custom classes - up to letter "z" (see jQuery Mobile Themes). The following table lists the available theme classes. The letter (a-z) means the style can be specified from a to z, e.g., ui-bar-a or ui-bar-b, etc.
| Class | Description |
|---|---|
| ui-bar-(a-z) | Specifies the bar theme - headers, footers, and other bars |
| ui-body-(a-z) | Specifies the color of content blocks - page content sections (deprecated in 1.4.0), list views, popups, sidebars, panels, loading, collapsibles |
| ui-btn-(a-z) | Specifies the button color |
| ui-group-theme-(a-z) | Defines the theme for control groups, listviews, and collapsible sets |
| ui-overlay-(a-z) | Defines the page background color, including dialogs, popups, and other top-level page containers |
| ui-page-theme-(a-z) | Defines the page theme |
Grid Classes
Columns in the grid are equal width (totaling 100%), with no borders, backgrounds, margins, or padding. There are four grid layouts available:
| Grid Class | Columns | Column Width | Corresponds | Example | ||||
|---|---|---|---|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it | ||||
| ui-grid-a | 2 | 50% / 50% | ui-block-a | b | Try it | |||
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a | b | c | Try it | ||
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d | Try it | |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e | Try it |
For more information, see the jQuery Mobile Grids section.