frontera azul en JScrollPane div

Question

ejemplo vivo: http://www.legodata.com/kc/kc.html

Tengo un problema de visualización frontera con JScrollPane, tendría que saber qué regla css a utilizar para eliminar esta frontera?

al hacer clic dentro, muestra un borde azul alrededor del div jScrollPane, desaparece (a veces) al hacer clic fuera del jScrollPane div.

Parece que este:

Aquí es el CSS actual:

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; 

puedo reproducir este problema en cromo y Safari (no probado en otros lugares).

Answer 1

Trate de añadir outline: none; a su css

Answer 2

outline: none; va a funcionar, pero tenga en cuenta que este es un comportamiento navegador por defecto en Chrome, Safari y FF y hará que sea difícil para las personas con deficiencia visual de navegar su sitio. Asegúrese de agregarlo solo a elementos no navegables en su página.

Prensa

Opción + tab

para ver la estructura de navegación de su sitio se muestra a los lectores de pantalla, etc. Y esto también se mostrará en el contorno aparece en sus otros elementos ! :)

Answer 3

Todo lo que tienes que hacer es agregar la siguiente línea en tu CSS.

.jScrollPaneContainer{ 
    outline: 0 none; 
} 

Answer 4

Al inicializar JScrollPane, utilice el parámetro:

hideFocus: true 

Por ejemplo:

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