O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Removing the handle focus outline

Most browsers display a dotted or solid outline around an element when they receive the focus. This isn't part of the user interface style, but rather a built-in accessibility feature of the browser. This forced visual display around elements, such as the slider handle, isn't always desirable. Let's look at how we can go about removing this default browser behavior from the slider handle.

How to do it...

We can use any basic div element to base our sample slider widget on. So let's jump right to our custom slider widget CSS.

.ui-slider-handle-no-outline {
    outline: 0;
}

And, now we have our customized implementation of the slider widget and an instance of our customized slider.

(function( $, undefined ) { $.widget( ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required