Firefox игнорирует стили контура и фокуса на выбранных элементах при использовании Tab

контекст

Firefox 14 (и 13); определенные стили CSS игнорируются при определенных условиях

Эта проблема

Используя следующий CSS:

*
{
    outline:none;
    -moz-outline:none;
    -moz-user-focus:ignore;    
}

JSFiddle

Firefox 14 (и 13) игнорирует эти стили при использовании Tab для переключения между select элементы. Щелчок по этим элементам после использования Tab по- прежнему отображает контур.

Заметки

  • Специально стайлинг select вместо * не имеет никакого эффекта
  • Это происходит только с select элементы.

Вопрос

Это ошибка или предполагаемое поведение?

Существуют ли другие стили CSS, которые нужно использовать, чтобы контур не появлялся бесконечно?

Источник

3 ответа

Решение

Это известная ошибка, которая вызвала несколько обсуждений Stackru. Из того, что я прочитал, Mozilla посчитала, что CSS - неподходящее место для обработки поведения этого элемента, и вместо этого решила обрабатывать его другими способами. В настоящее время единственным решением является использование tabindex="-1" или настроить отображение элемента как-то еще и изменить внешний вид выпадающего списка - но будьте осторожны, это само по себе может привести к появлению червей.

Если вы решите сделать это, я имел успех в прошлом со следующим клуджем:

select {
    appearance: normal;
        -webkit-appearance: none;
        -moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}

Внешний вид говорит браузеру отображать элемент как что-то еще, но это не согласуется от поставщика к поставщику. appearance: normal; является спецификацией, в то время как webkit заменяет normal на none. -moz-appearance: radio-container; Я нашел единственный способ отобразить текст в выбранной опции выбора, в то же время убрав хром стрелки для полностью настроенного раскрывающегося списка. Однако попробуйте поэкспериментировать с доступными параметрами, пока не найдете что-то, что работает и не добавляет кольцо фокусировки, которое вы хотите настроить. Internet Explorer потребует дополнительных усилий, чтобы согнуть выбранный файл в соответствии с вашими потребностями. Вполне возможно, но выходит за рамки этого вопроса и ответа.

Источник

Другое решение состоит в том, чтобы установить контур: нет и установить тень блока. Например:

.my_elements:focus
{
    outline: none;
    box-shadow: 0 0 3px 0px red;
}
Источник

Пока что единственный способ преодолеть это - установить tabindex='-1' ( см. fiddle), который, конечно, полностью убирает элемент из цепочки выбора вкладок. Это не было бы хорошо для пользовательского интерфейса, и я думаю, что это не совсем то, что вы хотите (я предполагаю, что вы хотите сохранить доступность вкладок, но просто сделайте свой собственный стиль для выделения).

Источник

Использовать

*:-moz-focusring {
  outline: 2px solid blue;
}

даст вам сходство с хромом

Кроме того, при использовании Mac вам также необходимо включить это: Как разрешить фокусировку ссылок на клавиатуре в Firefox?

Источник
Другие вопросы по тегам