JQueryUI слайдер, как удалить границу дескриптора

Я успешно изменил фоновое изображение, только желтую рамку, которая появляется каждый раз, когда я нажимаю на ручку. Эта граница остается до тех пор, пока я не щелкнул где-нибудь еще на странице. Кроме того, эта граница мигает каждый раз, когда ручка перемещается. У кого-то была такая же проблема для Но никто не ответил.

Как я могу удалить эту границу?

это моя страница (временная ссылка удалена)

Ответы

Ответ 1

.ui-slider a {outline:none;} /* a img { outline:none } for reference

Я думаю, что это по умолчанию некоторые браузеры, когда встроенное изображение используется как гиперссылка.

Chrome и Safari и FF показали его в той или иной форме: Safari показала его синим, FF показала его пунктирным контуром...

IE6, IE7 ничего не показывал.

** Изменить **
Вместо того, чтобы удалять контур, вы можете подумать о том, чтобы уложить его в свой дизайн. Это говорит пользователю клавиатуры, что ручка теперь сфокусирована, если ваш слайдер доступен/удобен для стрелок.

.ui-slider a:focus { outline:1px dotted gray }

Ответ 2

Я не уверен, что это лучше/хуже, чем данный ответ, но из того, что я могу сказать, я думаю, что предпочитаю то, как я всегда это делал, прежде чем я наткнулся на эту тему, и подумал, что поделюсь ею с другими для будущей справки, если кто-то хотел сделать это так. У меня хорошие результаты. Я думаю, что это специально нацеливает фактическую ручку более точно:

Добавьте это в свой файл css:

.ui-slider .ui-slider-handle:focus { outline: none; }

Ответ 3

Вам не хватает запятой в вашем документе css

.ui-widget-content .ui-state-focus,

Он также не применяется к изображению, кроме тега, поэтому

img { border:none; }

не должен работать.