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

jquery-mobile

Solution

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 ;
}

Problem

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 there until another spot on the page is clicked. This happens in firefox, not iPad. I would like that this halo is not displayed. What must I do for that focus halo not to be displayed at all ?

Original source