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

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

Answer 3

Well thats easy, just open your xxx-mobile-theme.css file
and find the class ui-focus and remove the box-shadow property manually

Answer 4

None of the solutions worked for me as I had a custom submit button and used data-role="none" on the button. The :focus event still had the blue glow so this worked for me. I wrapped my form in a div called myform.

.myform button:focus {
  outline: 0;
}