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 replaced with a background image. The jQuery user interface imposes a circular glow around the button on focus. I want to override css so that the blue glow does not appear.

The markup is as follows:

<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 do I need to add to CSS to override this effect?

Answer 1

If you want to remove the glow from all elements of the jQuery interface, I would suggest using the following code near the start 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 every single ui-focus selector (i.e...ui-btn-focus, .ui-tabs-focus, .ui-accordion-focus..ect).

Answer 2

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

(another answer option from Andy is that my problem was in ui-slider-handle, not ui-btn):

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

Answer 3

You will need to edit the css I'm afraid of:

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