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

Контекст

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

Проблема

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

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

JSFiddle

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

Примечания

  • В частности, стиль select вместо * не имеет эффекта.
  • Это происходит только с элементами select.

Вопрос

Является ли это ошибкой или предполагаемым поведением?

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

Ответы

Ответ 1

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

Если вы сделаете это, у меня был успех в прошлом со следующим kludge:

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

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

Ответ 2

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

Ответ 3

Другим решением является установка контура: none и установка теневого окна. Например:

.my_elements:focus
{
    outline: none;
    box-shadow: 0 0 3px 0px red;
}