jQuery Mobile CSS Classes
jQuery CSS Classes
jQuery Mobile CSS classes for styling 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 elements |
| ui-shadow | Adds shadow to elements |
| ui-overlay-shadow | Adds multiple layers of shadow to elements |
| ui-mini | Makes elements smaller |
Button Classes
In addition to the global classes, you can add the following classes to <a> or <button> elements (not <input> buttons):
| Class | Description |
|---|---|
| ui-btn | Add on <a> element and display as a button |
| 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 | Shows only the icon |
| ui-btn-a|b | Specifies button presentation. "a" is the default (gray background, black text style), "b" changes colors to black background, white text. |
Icon Classes
All available icon classes are used on <a> and <button> elements (seejQuery Mobile Icons Reference Manualto learn how to use them on other elements):
| Class | Icon Description | Icon |
|---|---|---|
| ui-icon-action | Action (generally used for page navigation/transition) |  |
| ui-icon-alert | Exclamation mark inside a triangle |  |
| ui-icon-audio | Audio/Speaker |  |
| ui-icon-arrow-d-l | Bottom-left arrow |  |
| ui-icon-arrow-d-r | Bottom-right arrow |  |
| ui-icon-arrow-u-l | Top-left arrow |  |
| ui-icon-arrow-u-r | Top-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, generally used for list button icon |  |
| ui-icon-bullets | Used to display list button icon |  |
| ui-icon-calendar | Calendar |  |
| ui-icon-camera | Camera |  |
| ui-icon-carat-d | Slide down icon |  |
| ui-icon-carat-l | Slide left icon |  |
| ui-icon-carat-r | Slide right icon |  |
| ui-icon-carat-u | Slide up icon |  |
| ui-icon-check | Check |  |
| ui-icon-clock | Alarm clock |  |
| ui-icon-cloud | Cloud |  |
| ui-icon-comment | Comments / Message |  |
| ui-icon-delete | Delete |  |
| ui-icon-edit | Edit / Pencil |  |
| ui-icon-eye | Eye |  |
| ui-icon-forbidden | Disabled sign |  |
| ui-icon-forward | Undo - (go back to previous step) |  |
| ui-icon-gear | Gear, generally used as a settings button icon |  |
| ui-icon-grid | Grid |  |
| ui-icon-heart | Heart shape, can be used to bookmark articles |  |
| ui-icon-home | Home |  |
| ui-icon-info | Info |  |
| 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 sign |  |
| 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 - can be defined up to the letter "z" (seejQuery Mobile Themes). The table below lists the available theme classes. The letters (a-z) mean styles can be specified from a to z. For example ui-bar-a or ui-bar-b, etc.
| Class | Description |
|---|---|
| ui-bar-(a-z) | Specifies bar presentation - header, footer, and other bars |
| ui-body-(a-z) | Specifies the color of content blocks - page content section (deprecated in version 1.4.0), list views, popups, sidebars, panels, loading, collapsibles. |
| ui-btn-(a-z) | Specifies button color |
| ui-group-theme-(a-z) | Defines the presentation of control groups, listviews, and collapsible sets. |
| ui-overlay-(a-z) | Defines the page background color, including dialogs, popups, and other page containers that appear at the top level |
| ui-page-theme-(a-z) | Defines the page presentation |
Grid Classes
The columns in a grid are of equal width (totaling 100%), with no borders, background, margin, or padding. There are four layout grids available:
| Grid Classes | Column | Column width | Corresponding | 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, seejQuery Mobile Gridssection.
Other Extensions