Синяя рамка на элементе jScrollPane - PullRequest
Новая
       9

Синяя рамка на элементе jScrollPane

11 голосов
/ 22 ноября 2010

Пример в реальном времени : http://www.legodata.com/kc/kc.html

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

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

Это выглядит так:

alt text

Вот текущий 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 (в других местах не тестировалась).

Ответы [ 4 ]

21 голосов
/ 24 января 2012

При инициализации jScrollPane используйте параметр: 

hideFocus: true

Например: 

$('.scroll-pane').jScrollPane(
{
   autoReinitialise: true,
   hideFocus: true
});
14 голосов
/ 22 ноября 2010

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

3 голосов
/ 22 ноября 2010

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

Нажмите

Option + вкладка

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

1 голос
/ 11 ноября 2011

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

.jScrollPaneContainer{
    outline: 0 none;
}
...