Bordo blu sul JScrollPane div

Question

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

Ho un problema di visualizzazione confine con JScrollPane, vuoi sapere quale regola CSS da utilizzare per rimuovere questo confine?

quando si fa clic all'interno di esso, visualizza un bordo blu attorno al jScrollPane div, scompare (a volte) quando si fa clic all'esterno del jScrollPane div.

Ecco come si presenta:

Ecco l'attuale 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; 

posso riprodurre il problema in cromo e Safari (non testato in altri posti).

Answer 1

Prova ad aggiungere outline: none; al tuo css

Answer 2

outline: none; funzionerà, ma si prega di essere consapevoli che questo è un comportamento browser predefinito in Chrome, FF e Safari e renderà più difficile per le persone ipovedenti di navigare nel sito. Assicurati di aggiungerlo solo agli elementi non navigabili sulla tua pagina.

Press

Option + scheda

per vedere la struttura di navigazione del tuo sito dimostrato di screen reader, ecc E questo mostrerà anche il luogo dove il contorno si presenta sugli altri elementi ! :)

Answer 3

Tutto quello che dovete fare è aggiungere la seguente riga nel vostro CSS.

.jScrollPaneContainer{ 
    outline: 0 none; 
} 

Answer 4

Quando si inizializza JScrollPane, utilizzare il parametro:

hideFocus: true 

Per esempio:

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