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: slider handle

Any suggestions on how I could remove that with css?

I'm guessing that's the outline ? – adeneo Mar 14 '14 at 16:01 — adeneo, Mar 14 '14 at 16:01

score 5 · Answer 1 · answered Mar 14 '14 at 16:12

5

try

outline: 0 none !important;

on the input style

answered Mar 14 '14 at 16:12

GhettoPancake

101
7

score 4 · Accepted Answer · edited May 23 '17 at 12:00

4

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

edited May 23 '17 at 12:00

Community

1
1

answered Mar 14 '14 at 16:04

ShaggyInjun

2,880
2
31
52

score 0 · Answer 3 · answered Mar 14 '14 at 16:05

0

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

answered Mar 14 '14 at 16:05

Chintan Bhatt

257
1
3
9

jQuery UI Slider Handle blue border when 'focus'ed

3 Answers3