CODEWITHSUNDEEP
jquery
Qcom
Qcom

Reputation: 19193

Remove highlight on jQuery slider control

Does anyone know how to remove the bluish highlight which appears when dragging the jQuery slider control in webkit browsers? It appears to be a dotted highlight box in FireFox, and I'm not sure about IE, but you can view it here:

http://www.marioplanet.com/index.asp

It's on the top of the left column, and it appears after dragging it around.

Upvotes: 5

Views: 2097

Answers (3)

davydka
davydka

Reputation: 73

Maybe onmousedown="$(this).css({'outline': 'none'})", so that keyboard navigators aren't affected?

Upvotes: 0

ssokolow
ssokolow

Reputation: 15355

As Skelton says, .ui-slider-handle { outline: none; } should do it, but it's generally not a good idea because doing so breaks keyboard navigation.

(The purpose of the outline is to indicate which element has focus, much like how native GUIs provide some kind of outline on the active widget. Without it, it takes a special kind of insanity to interact with a website via the keyboard.)

Upvotes: 1

tom
tom

Reputation: 8359

Add the following to your css

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

This will remove the outline form the slider-handle.

Upvotes: 7

Related Questions