jQuery Mobile CSS Classes
jQuery CSS Classes
jQuery Mobile use CSS Classes to style different elements.
For the reference list below, we have included CSS classes for common styles.
Global Classes
These classes can be added on any jQuery Mobile widgets (buttons, toolbars, panels, tables, lists, etc..):
| Class | Description |
|---|---|
| ui-corner-all | Adds rounded corners to the element |
| ui-shadow | Adds shadow to the element |
| ui-overlay-shadow | Adds an overlay 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 | Must be added to <a> elements if you want them to be styled as buttons |
| ui-btn-inline | Displays the button inline |
| 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 color of the button. "a" is default (gray background with black text), while "b" will change the color to a black background with white text |
Icon Classes
All available icon classes for <a> and <button> elements (see Icons Reference for how to use icons on other elements):
| Class | Icon Description | Icon |
|---|---|---|
| ui-icon-action | Action (arrow arcing clockwise out of a box) | |
| ui-icon-alert | Exclamation mark inside a triangle | |
| ui-icon-audio | Sound / Speakers | |
| 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 (curved arrow arcing counterclockwise upwards) | |
| ui-icon-bars | Three horizontal bars over each other | |
| ui-icon-bullets | Three horizontal bullets over each other | |
| ui-icon-calendar | Calendar | |
| ui-icon-camera | Camera | |
| ui-icon-carat-d | Down carat | |
| ui-icon-carat-l | Left carat | |
| ui-icon-carat-r | Right carat | |
| ui-icon-carat-u | Up carat | |
| 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 | Forward - (curved arrow arcing clockwise upwards) | |
| ui-icon-gear | Gear | |
| ui-icon-grid | Grid | |
| ui-icon-heart | Heart / Love symbol | |
| ui-icon-home | Home / House | |
| ui-icon-info | Information | |
| ui-icon-location | Location | |
| ui-icon-lock | Lock / Padlock | |
| ui-icon-mail | Mail / Letter | |
| ui-icon-minus | Minus sign | |
| ui-icon-navigation | Navigation | |
| ui-icon-phone | Telephone | |
| ui-icon-power | Power (On/off) | |
| ui-icon-plus | Plus sign | |
| ui-icon-recycle | Recycle sign | |
| ui-icon-refresh | Refresh - Circular arrow | |
| ui-icon-search | Search / Magnifying glass | |
| ui-icon-shop | Shop / Bag | |
| ui-icon-star | Star | |
| ui-icon-tag | Tag | |
| ui-icon-user | User / A person | |
| ui-icon-video | Video / Camera |
Theme Classes
jQuery Mobile provides two theme classes: a (gray) and b (black). However, you can also create your own, custom class values - all the way up to the letter "z" (See the Themes chapter). The table below lists the available theme classes. The letters (a-z) means that you can specify a letter from a to z. For example: ui-bar-a or ui-bar-b, etc.
| Class | Description |
|---|---|
| ui-bar-(a-z) | Specifies the color for a bar - headers, footers and other bars |
| ui-body-(a-z) | Specifies the color for a content block - page content panes (deprecated in version 1.4.0), listview items, popups, collapsibles, loader, sliders, and panels |
| ui-btn-(a-z) | Specifies the color for a button (and icon) |
| ui-group-theme-(a-z) | Specifies the color for controlgroups, listviews and collapsible sets |
| ui-overlay-(a-z) | Specifies the background color of the page that the dialog, popup and other page containers appears on top of |
| ui-page-theme-(a-z) | Specifies the color for pages |
Grid Classes
Columns in a grid are of equal width (and 100% wide in total), with no border, background, margin or padding. There are five layout grids that can be used:
| Grid Class | Columns | Column Widths | Corresponds To | 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 about grids, read our jQuery Mobile Grids Chapter.
