YouTipjQuery Mobile CSS Classes | Rookie Tutorial
jQuery CSS Classes
jQuery Mobile CSS classes are used to style different elements.
The following list contains commonly used CSS styles:
Global Classes
The following classes can be used with jQuery Mobile widgets (buttons, toolbars, panels, tables, lists, etc.):
| Class | Description |
|---|---|
| ui-corner-all | Adds rounded corners to an element |
| ui-shadow | Adds shadow to an element |
| ui-overlay-shadow | Adds multi-layered shadow to an 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 | Applied to <a> elements to display 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), while "b" changes it to a black background with white text |
Icon Classes
All available icon classes can be used on <a> and <button> elements (see the jQuery Mobile Icon Reference for how to use them on other elements):
| Class | Icon Description | Icon |
|---|---|---|
| ui-icon-action | Action (generally used for page navigation/transitions) | |
| ui-icon-alert | Exclamation mark inside a triangle | |
| ui-icon-audio | Speaker / audio device | |
| ui-icon-arrow-d-l | Arrow pointing down-left | |
| ui-icon-arrow-d-r | Arrow pointing down-right | |
| ui-icon-arrow-u-l | Arrow pointing up-left | |
| ui-icon-arrow-u-r | Arrow pointing up-right | |
| ui-icon-arrow-l | Arrow pointing left | |
| ui-icon-arrow-r | Arrow pointing right | |
| ui-icon-arrow-u | Arrow pointing up | |
| ui-icon-arrow-d | Arrow pointing down | |
| ui-icon-back | Back | |
| ui-icon-bars | Three horizontal lines, typically used as a menu/list button icon | |
| ui-icon-bullets | Used as a list button icon | |
| 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 | Alarm 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 | Prohibited sign | |
| ui-icon-forward | Forward - (undo / go back one step) | |
| ui-icon-gear | Gear, typically used as a settings button icon | |
| ui-icon-grid | Grid | |
| ui-icon-heart | Heart shape, 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 | Email / envelope | |
| ui-icon-minus | Minus sign | |
| ui-icon-navigation | Navigation | |
| ui-icon-phone | Phone | |
| ui-icon-power | Power switch (On/off) | |
| ui-icon-plus | Plus sign | |
| ui-icon-recycle | Recycle symbol | |
| ui-icon-refresh | Refresh | |
| ui-icon-search | Search / magnifying glass |