Latest web development tutorials
 

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.