Blue border on jScrollPane div

Question

Live example: http://www.legodata.com/kc/kc.html

I've got a border display issue with jScrollPane, would you know which css rule to use to remove this border?

when clicking inside it, it displays a blue border around the jScrollPane div, it disappears (sometimes) when clicking outside the jScrollPane div.

It looks like this:

Here is the current CSS:

background-color: transparent;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
bottom: auto;
color: #999E92;
display: block;
float: right;
font-family: VerdanaArial, Helvetica, sans-serif;
font-size: 16px;
height: 802px;
left: auto;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
right: auto;
top: auto;
visibility: visible;
width: 200px;
z-index: 1;

I can reproduce this issue in Chromium and Safari (not tested in other places).

Answer 1

When you initialize jScrollPane, use the parameter:

hideFocus: true

For ex:

$('.scroll-pane').jScrollPane(
{
   autoReinitialise: true,
   hideFocus: true
});

Answer 2

Try adding outline: none; to your css

Answer 3

outline: none; will work, but please be aware that this is a default browser behavior in Chrome, FF and Safari and will make it hard for partially sighted people to navigate your site. Make sure to add it only to non-navigable elements on your page.

Press

Option+tab

to see the navigational structure of your site shown to screen-readers, etc. And this will also show where the outline shows up on your other elements! :)