Как сделать настройку границы ввода без удаления рамочного фокуса в Firefox / IE - PullRequest
1 голос
/ 24 апреля 2019

Важно : я не хочу настраивать / удалять стили фокуса для специальных возможностей (a11y).В основном невозможно имитировать все различные стили фокусировки браузеров / операционных систем

Настройка внешнего вида и ощущений ввода / текстовой области удаляет стиль контура, когда элемент находится в фокусе.Также добавлены странные границы и т. Д.

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

Я тестировал на Firefox Mac и IE 11 (Chrome работает нормально), возможно, другой браузер работает так же.Вот Codepen, чтобы попробовать его в браузере: https://codepen.io/lbineau/pen/dLgwoo

<label for="customized-input">Customized input</label>
<input id="customized-input" type="text" />

<label for="native-input">Native input</label>
<input id="native-input" type="text" />

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

Фактический результат : контур не отображается, когда вход сфокусирован.

1 Ответ

0 голосов
/ 24 апреля 2019

Я не знаю причину этого.

Но вы можете переопределить его с помощью следующего кода:

#customized-input:-moz-focusring {
  outline: Highlight solid 1px; 
}
...