For A Jquery Ui Button How Can I Remove The Blue Glow On Focus?

I am working with Jquery UI. I have a button that I have replaced with a background image. JQuery UI places a circular blow glow around the button on focus. I want to override the

Solution 1:

If you would like to remove the glow from all jQuery UI elements, I would suggest using the following code near the beginning of your CSS:

/* Disable jQuery UI focus glow */

*:focus {
    outline: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

This way, you will not need to track down each individual ui-focus selector (i.e. .ui-btn-focus, .ui-tabs-focus, .ui-accordion-focus..ect).

Solution 2:

For me, on chrome 26 for mac, I fixed this by changing "outline" to none.

(the other diff from Andy's answer is that my issue was on a ui-slider-handle rather than ui-btn):

.ui-slider-handle:focus {
  outline: none;
}

Solution 3:

You will have to edit the css I'm afraid:

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