jQuery UI Slider Handle blue border when 'focus'ed

Question

I'm restyling the jQuery UI Slider widget by overriding the CSS classes provided by jQuery UI. I cant seem to get the blue border that shows up around the handle when I click on the handle to disappear.

It looks like so:

Any suggestions on how I could remove that with css?

Answer 1

try

outline: 0 none !important;

on the input style

Answer 2

Override it using !important after the attribute value in css.

Answer 3

That blue border is chrome specific, firefox doesn't show it. Chrome adds the border to links. Because the button is a link you are seeing the border.

How to remove the border highlight on an input text element