CODEWITHSUNDEEP
jquery-mobile
chmike
chmike

Reputation: 22174

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

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 ?

Upvotes: 4

Views: 7767

Answers (4)

cbyte
cbyte

Reputation: 701

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

Upvotes: 0

TheGwa
TheGwa

Reputation: 1889

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

Upvotes: 3

codaniel
codaniel

Reputation: 5253

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

Upvotes: 8

user1263800
user1263800

Reputation:

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

Upvotes: 0

Related Questions