jQueryUI slider how to remove handle border

I have successfully changed the background image，just a yellow border which appear each time i click the handle. This border remains until i click somewhere else in the page. Moreover this border is blinking each time the handle is mov开发者_如何学编程ed. Someone had the same problem befor But no one has replied.

How can i remove this border ?

this is my page (temporary link removed)

---

.ui-slider a {outline:none;} /* a img { outline:none } for reference

I think it's a default of some browsers when an inline image is used as a hyperlink.

Chrome and Safari and FF showed it in one form or another: Safari showed it as blue, FF showed it as a dotted outline...

IE6, IE7 showed nothing.

** Edit **
Rather than removing the outline, you may consider styling it to suite your design. This tells a keyboard-user that the handle is now focused, if your slider is accessible/arrow-key-friendly.

.ui-slider a:focus { outline:1px dotted gray }

---

I am not sure if this is better/worse than the given answer, but from what I can tell I think I prefer the way I have always done this before I came across this thread, and thought I would share it with others for future reference if anyone wanted to do it like this. I got good results. I think this specifically targets the actual handle more precisely:

Add this to your css file:

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

---

You're missing a comma in your document css

.ui-widget-content .ui-state-focus,

It also isn't being applied to an image but an a tag so

img { border:none; }

shouldn't work.