Задать вопрос
FedyaAsker
@FedyaAsker
Постоянно что то не понимаю...
html

Как правильно доступно прятать лэйблы у инпутов для IE11?

Подскажите пожалуйста, как правильно прятать лэйблы, чтобы они оставались доступны для скринридеров и адекватно вели себя в IE11?
------------------------
Адекватное поведение современных браузеров
5cbca5a64c063896062213.gif
Каличный IE11
5cbca5ccb0018241860460.gif

------------------------
HTML
<p>
  <label class="visually-hidden" for="user-login">Логин</label>
  <input class="user-login" id="user-login" type="text" name="login" placeholder="Логин">
</p>
<p>
  <label class="visually-hidden" for="user-password">Пароль</label>
  <input class="user-password" id="user-password" type="password" name="password" placeholder="пароль">
</p>


В стилях использую такой вариант visually-hidden
CSS
.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

  • Вопрос задан
  • 489 просмотров
3 комментария
Подписаться 2 Простой 3 комментария
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Проблема в CSS. Забавные конструкции типа not() тут не нужны, потому что у вас тупо исключается применение нужных стилей, если элемент либо активный, либо в фокусе. Не знаю, зачем это вообще, нужно так:
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  opacity: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}


Вот пример, который можно открыть в IE11 в режиме чтения по ссылке для проверки:

Ответ написан
10 комментариев
10 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сканер коэффициентов в букмекерских конторах
20 апр. 2024, в 08:39
100000 руб./за проект
Доработать бота
20 апр. 2024, в 08:24
1500 руб./за проект
Разработать интранет сайт (корпоративный портал)
20 апр. 2024, в 07:24
100000 руб./за проект
Ещё заказы