For a Jquery UI button how can I remove the blue glow on focus?

Question

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 css such that the blue glow does not appear.

The markup looks like this:

<form id="sliderUIContainer" class="noUIeffects">
 <label for="slider-0" class="ui-hidden-accessible">Input Slider</label>
 <input type="range" name="slider" id="slider-0" value="0" min="0" max="20" />
</form>

What will I have to add to the CSS to override this effect?

Answer 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).