JQuery Mobile: how to not display the button focus halo when a button is clicked?

Question

I have buttons in my web app using jQuery Mobile.

When clicked the buttons have the ui-focus class added which displays a blue halo around buttons. The class stays

Answer 1

You can override the default css instead of hacking up the source. Just make sure your css file is after the JQM one.

.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none ;
}