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 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 ?

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

Answer 2

I have found that the best way to do this is to give focus back to the page after your buttons are clicked.

$('yourButtons').click(function(){
    //Do some important stuff
    // ....

    $.mobile.activePage.focus();
});