jQuery Mobile Docs - Theming Forms

# Theming forms

Home Search

## Form themes

jQuery Mobile has a rich theming system that gives you full control of how pages and forms are styled. By default all form elements inside a container will automatically adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The `data-theme` attribute can be applied to any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.

All the form elements in the examples below use the same HTML code with no theme swatch specified on the individual form elements. The only difference between each example block code is a `data-theme` swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.

## Body swatch "a"

Text Input:
Flip switch:
Slider:
Font styling: b i u
Choose a pet: Cat Dog Hamster Lizard
Choose shipping method:

## Body swatch "b"

Text Input:
Flip switch:
Slider:
Font styling: b i u
Choose a pet: Cat Dog Hamster Lizard
Choose shipping method:

## Body swatch "c"

Text Input:
Flip switch:
Slider:
Font styling: b i u
Choose a pet: Cat Dog Hamster Lizard
Choose shipping method:

## Body swatch "d"

Text Input:
Flip switch:
Slider:
Font styling: b i u
Choose a pet: Cat Dog Hamster Lizard
Choose shipping method:

## Body swatch "e"

Text Input:
Flip switch:
Slider:
Font styling: b i u
Choose a pet: Cat Dog Hamster Lizard
Choose shipping method:

### More in this section

- Form elements
- Form basics
- Form element gallery
- Mini form element gallery
- Text inputs
- Search inputs
- Slider
- Flip toggle switch
- Radio buttons
- Checkboxes
- Select menus
- Theming forms
- Native form elements
- Submitting forms