Как настроить границу ввода без удаления фокуса контура в Firefox / IE

#css #firefox #focus #accessibility #outline

#css #firefox #фокус #Специальные возможности #контур

Вопрос:

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

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

В чем причина такого поведения, на мой взгляд, это разрушает доступность? Как не переопределять стили фокуса при изменении простых свойств 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. Вопрос, почему бы не выполнить сброс css, чтобы он выглядел одинаково для всех браузеров? Запуск с Normalize.css, например, был бы отличным способом начать работу. Вы могли бы пойти дальше, выполнив перезагрузку. Если вы планируете использовать bootstrap в будущем, я рекомендую bootstrap boot. Более подробную информацию о сбросе и перезагрузке вы можете найти здесь: css-tricks.com/reboot-resets-reasoning

2. Спасибо за ваш ответ. На самом деле я не стремлюсь нормализовать поведение браузера, а наоборот, найти способ не нарушать поведение браузера. Между прочим, я использую normalize.css в течение многих лет. Я специально не добавлял его в образец codepen, чтобы иметь «сырую» версию браузера.

Ответ №1:

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

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

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

1. Спасибо за ваш ответ, но я больше ищу объяснение, а не решение. Выполнение того, что вы предлагаете, предполагает, что все Mozilla Firefox используют этот конкретный контур. Я почти уверен, что если вы проверите Windows / mac os / linux / Android / ios Firefox, у них нет такого контура (некоторые или сплошные / пунктирные / размытые и т.д.).

Ответ №2:

Если элемент css, который вы хотите изменить, является родственным, вы можете использовать его следующим образом,

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

        
  .customized-input:focus ~.label-class {
        amp;::before {
            border:1px solid red;
            height:40px;
            width: 40px;
       
  }
}