jQuery Mobile CSS Classes

jQuery CSS Classes

jQuery Mobile use CSS Classes to style diverse elements.

For the reference list beneath, we have included CSS classes for normal styles.

Global Classes

These classes can be included any jQuery Mobile gadgets (catches, toolbars, boards, tables, records, etc..):

Class Description
ui-corner-all Adds adjusted 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 component smaller

Button Classes

In option to worldwide classes, you can add the accompanying classes to <a> or <button> components (not <input> buttons):

Class Description
ui-btn Must be added to <a> components on the off chance that you need them to be styled as buttons
ui-btn-inline Displays the catch inline
ui-btn-symbol top Positions the symbol over the catch text
ui-btn-symbol right Positions the symbol to one side of the catch text
ui-btn-symbol bottom Positions the symbol beneath the catch text
ui-btn-symbol left Positions the symbol to one side of the catch text
ui-btn-symbol notext Displays just the icon
ui-btn-a|b Specifies the shade of the catch. "a" is default (dark foundation with dark content), while "b" will change the shading to a dark foundation with white text

Icon Classes

All accessible symbol classes for <a> and <button> components (see Icons Reference for how to utilize symbols on other elements):

Class Icon Description
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 gives two subject classes: a (dim) and b (dark). Be that as it may, you can likewise make your own, custom class esteems - as far as possible up to the letter "z" (See the Themes section). The table underneath records the accessible subject classes. The letters (a-z) implies that you can determine a letter from beginning to end. For instance: ui-bar-an or ui-bar-b, etc.

Class Description
ui-bar-(a-z) Specifies the shading for a bar - headers, footers and other bars
ui-body-(a-z) Specifies the shading for a substance square - page content sheets (expostulated in form 1.4.0), listview things, popups, collapsibles, loader, sliders, and panels
ui-btn-(a-z) Specifies the shading for a catch (and icon)
ui-gather topic (a-z) Specifies the shading 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
ui-grid-solo 1 100% ui-block-a
ui-grid-a 2 50% / 50% ui-block-a|b
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c 
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e