O'Reilly logo

jQuery Mobile Cookbook by Chetan K Jain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Overriding the global Active State theme

The jQuery Mobile framework uses a bright blue color to indicate the active state for buttons and other controls. This Active State theme is consistent for all the default swatches and cannot be overridden via markup. This recipe shows you how to override the Active State theme.

Getting ready

Copy the full code of this recipe from the code/10/active-state source folder. You can launch this code using the URL: http://localhost:8080/10/active-state/main.html.

How to do it...

  1. Create the active-state.css stylesheet to style the active state, as follows:
    .ui-btn-active { border: 1px solid #137000; background: #93ff86; font-weight: bold; color: #000; text-shadow: 0 1px 1px #eee; cursor: pointer; text-decoration: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required