Jquery UI Slider focus issue

Question

I have a problem with the jQuery UI Slider. The issue also appears on the demo.

It is more obvious in Chrome - if you go to http://jqueryui.com/demos/slider/#steps

and slide the slider, you'll not see anything wrong. If you then click "New Window" or go to (http://jqueryui.com/demos/slider/steps.html) to view the demo in a new window and try sliding the slider, you'll see the handle of the slider gets a focus box around it during dragging.

I am having this problem and I cannot seem to fix it.

Can anyone point me in the right direction?

Answer 1

Adding this to your CSS should do the trick.

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