Jquery sliders behaves differently than example from documentation.

Question

I copy pasted the code from http://jqueryui.com/demos/slider/range.html for local testing. And what I see is different from what the url shows. When I click the slider "big dots" (used to change the value) the dot image gets a dotted border around it and it doesn't go away after I release the click until I focus another element on the page.

Here's how it looks in my local test (using Vader theme makes it easy to see):

Why this doesn't happen on the example from jQueryUI demos?

Answer 1

It's because it is a link in firefox, which displays a border by default on all links. Use this in your css.

a { outline: none; }
button::-moz-focus-inner { border: 0; }

Edit: it is a link, so I updated the css accordingly.