Я успешно изменил фоновое изображение, только желтую рамку, которая появляется каждый раз, когда я нажимаю на ручку. Эта граница остается до тех пор, пока я не щелкнул где-нибудь еще на странице. Кроме того, эта граница мигает каждый раз, когда ручка перемещается. У кого-то была такая же проблема для Но никто не ответил.
Как я могу удалить эту границу?
это моя страница (временная ссылка удалена)
.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 }
Я не уверен, что это лучше/хуже, чем данный ответ, но из того, что я могу сказать, я думаю, что предпочитаю то, как я всегда это делал, прежде чем я наткнулся на эту тему, и подумал, что поделюсь ею с другими для будущей справки, если кто-то хотел сделать это так. У меня хорошие результаты. Я думаю, что это специально нацеливает фактическую ручку более точно:
Добавьте это в свой файл css:
.ui-slider .ui-slider-handle:focus { outline: none; }
Вам не хватает запятой в вашем документе css
.ui-widget-content .ui-state-focus,
Он также не применяется к изображению, кроме тега, поэтому
img { border:none; }
не должен работать.