Как убрать контур кнопки в опере на фокусе - PullRequest
Новая
       112

Как убрать контур кнопки в опере на фокусе

7 голосов
/ 25 августа 2010

Кто-нибудь знает, как убрать пунктирный контур на кнопках в Opera?

Ответы [ 12 ]

5 голосов
/ 09 февраля 2011

Я сделал это.

Вот, пожалуйста: http://jsbin.com/oniva4. [проверено в Opera 10.5 / 11]

В секрете используется outline-offset:-2px; (эффективно закрывающий точки) и цвет фона для контура. outline-offset поддерживается начиная с версии 9.5.

5 голосов
/ 07 февраля 2011

Введение статьи Не теряйте фокус

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

В этой короткой статье мы сосредоточимся на доступности клавиатуры и на том, как неосторожное использование CSS потенциально может сделать ваши сайты совершенно непригодными для использования.

А список тестов приведен в статье по Схема управления .

Обновление 2011-02-08

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

3 голосов
/ 26 июня 2011

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

Если вы примените преобразование к элементу, это убьетнаброски в опере;ему даже не нужно делать видимое преобразование, достаточно просто применить свойство.Так что это сделает работу: 

#myButton:focus
{
    -o-transform:rotate(0);
}

Но я не могу обещать, что это не будет считаться ошибкой рендеринга, и, следовательно, что-то, что может измениться в будущем.

2 голосов
/ 27 ноября 2012

Я использовал этот трюк выше для своей текстовой области и работал отлично!Используя текстовую область с идентификатором «itens», все готово! 

#itens:focus, #itens:active{
    outline: 1px solid white;
    outline-offset: -2px;
}

Итак, вы можете поиграть с этим: 

#itens:focus, #itens:active{
    outline: 1px solid lime;
    outline-offset: -2px;
}
2 голосов
/ 07 февраля 2011

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

*:focus, *:active {
        outline: none; (or possibly outline: 0)
}

Я исследовал это больше и похоже на поля ввода и кнопки, это не будет работать, если вы не отредактируете конфигурацию браузера, как Firefox about: config page.По-видимому, это сделано из соображений доступности, поэтому для заполнения и отправки формы можно использовать клавиатуру без использования мыши.

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

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

Так что, если это не сработает, другая вещь, которую вы можете сделать, что часто делает, - это указать цвет контура как "rgba (0,0,0,0)"

1 голос
/ 07 февраля 2011

Просто прочитайте это сообщение на сайте оперы

http://my -beta.opera.com / сообщество / форум / topic.dml? ID = 712402

Кажется, для этого нет исправления

1 голос
/ 25 августа 2010

Вы ищете: 

button{
  outline:none;
}

или если ваша кнопка является входом ... 

input[type=button]{
  outline:none;
}
0 голосов
/ 29 марта 2013

лучше: 

outline: solid 0;

для всех веб-браузеров

0 голосов
/ 28 октября 2012

Это не столько ответ, сколько объяснение того, что происходит:

История

Моей причиной для удаления контура оперы было добавление собственного контура. Чтобы добавить схему я использовал: 

:focus{
    outline:1px dotted #999;
    outline-offset:-3px;
}

Это прекрасно работает в любом другом браузере ... кроме Opera. Вместо этого Opera дает вам эту странную интерференционную картину, которая выглядит как контур dotted-dashed:
both
теперь, если вы удалите свой контур, у вас все еще будет стандартный контур, который предоставляет Opera, - красивая простая пунктирная линия с шагом 1px:
opera
Поскольку у меня нет способа добавить стиль в каждый браузер, кроме Opera, я решил удалить контур Opera перед добавлением своего собственного. Используя решение brothercake, -o-transform:rotate(0); сделайте это, а затем примените мой собственный контур:
css
Voila!

Объяснение?

Из того, что я могу сказать, Opera добавляет свой собственный вторичный контур поверх любого контура, определенного CSS.

Кажется, что этот вторичный контур имеет независимый цвет, ширину, стиль и смещение.

Цвет противоположен фону,
Ширина 1px,
Стиль dotted,
и смещение на 2px меньше границы.

color-test width-test offset-test

Извините, стиль изображения отсутствует, загрузка не прошла корректно

Одна интересная вещь заключается в том, что стиль dotted в Opera outline не совпадает с пунктирным контуром CSS, иначе не было бы интерференционной картины с обоими:

Вывод:

Как я уже говорил выше, я использую решение brothercake, которое сводит на нет границу оперы: 

-o-transform:rotate(0);

Как он упомянул в своем последнем комментарии, у этого исправления есть некоторые проблемы, так как это ошибка рендеринга:

Я заметил, что при возврате фокуса окна или вкладки на страницу, содержащую кнопку, , если кнопка ранее имела фокус, контур Opera будет появляться до тех пор, пока кнопка не потеряет фокус или не окажется над ней.

Страница:
...