Синяя рамка на jScrollPane div

Живой пример: http://www.legodata.com/kc/kc.html

У меня проблема с отображением границы с jScrollPane, знаете ли вы, какое правило css использовать для удаления этой границы?

щелкая внутри него, он отображает синюю рамку вокруг div jScrollPane, она исчезает (иногда) при нажатии вне div jScrollPane.

Он выглядит следующим образом:

Вот текущий 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;

Я могу воспроизвести эту проблему в Chromium и Safari (не тестировался в других местах).

Ответ 1

Попробуйте добавить outline: none; к вашему css

Ответ 2

Когда вы инициализируете jScrollPane, используйте параметр:

hideFocus: true

Для ex:

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

Ответ 3

outline: none; будет работать, но, пожалуйста, имейте в виду, что это поведение браузера по умолчанию в Chrome, FF и Safari, и это затруднит перемещение людей с определенным количеством людей на ваш сайт. Не забудьте добавить его только к несуществующим элементам на вашей странице.

Нажмите

Option + вкладка

чтобы увидеть навигационную структуру вашего сайта, показанную на экране, и т.д. И это также покажет, где контур отображается на других ваших элементах!:)

Ответ 4

Все, что вам нужно сделать, это добавить следующую строку в свой CSS.

.jScrollPaneContainer{
    outline: 0 none;
}