Как сделать фокус на элементах страницы с помощью стилей focus CSS примеры работы
Использование: фокус для стилей внешнего div?
Когда я начинаю писать текст в текстовом поле, я хочу, чтобы внешний div, с полем класса, имел границу, которая стала твердой, а не пунктирной, но так или иначе фокус в этом случае не применяется. Если он работает с: активным, то как он не работает: focus?
Любые идеи, почему?
(Обратите внимание: я хочу, чтобы граница DIV стала твердой, а не текстовой)
Хотя этого не может быть достигнуто только с помощью CSS/HTML, это может быть достигнуто с помощью JavaScript (без библиотеки):
NB: Поддержка браузера: Chrome (60+), Firefox и Safari
:focus
На этой странице
CSS псевдо-класс :focus применяется, когда элемент (такой как input формы) получает фокус. Обычно он активируется при клике мышью пользователем или при выборе элемента с использованием клавиши «tab» на клавиатуре.
Примечание: Этот псевдо-класс применяется только тогда, когда в фокусе находится сам элемент. Используйте :focus-within , если вы хотите выбрать элемент, в котором находится сфокусорованный элемент.
Синтаксис
Пример
Результат
Проблемы доступности
Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). WCAG 2.1 SC 1.4.11 Non-Text Contrast (WCAG 2.1 SC 1.4.11 Нетекстовой контраст) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1.
:focus
Никогда не удаляйте фокусный outline (видимый индикатор фокуса), не заменяя его фокусным контуром подходящим под требования WCAG 2.1 SC 1.4.11 Non-Text Contrast
События: focus и blur
События: focus и blur
Здравствуйте! Продолжаем разбираться с обработкой полей и элементов формы на JavaScript и сегодня рассмотрим такие события как focus и blur. Давайте сразу разберемся, что такое «фокус элемента» — это когда пользователь клацает на элементе формы.
Потеря фокуса — это когда пользователь уходит с одного элемента формы и переходит на другой элемент будь то текстовое поле или выпадающий список. Но давайте обо всем подробнее.
События focus/blur
Итак событие focus вызывается тогда, когда пользователь фокусируется на элементе или просто выбирает его, а blur – когда фокус исчезает, например посетитель кликает на другом месте экрана или другом элементе формы.
Давайте для примера сразу посмотрим на них в деле, используем для проверки введённых в форму значений.
- Обработчик onblur проверяет, что в поле введено число, если нет – будет показывать ошибку.
- Обработчик onfocus, если текущее состояние поля ввода – «ошибка» – скрывает её (потом при onblur будет повторная проверка).
В примере, если вы наберете что-нибудь в поле «возраст» и завершите ввод далее нажмете Tab или просто кликните в другое место страницы, то введённое значение будет автоматически проверено:
Методы focus/blur
Также в Javascript имеются и методы с теми же названиями, которые переводят/уводят фокус с элемента.
Давайте для примера изменим пример выше, чтобы при неверном вводе посетитель просто не мог уйти с элемента до тех пор пока не введет правильное значение:
Просмотреть пример
Если ввести что-то нецифровое в поле «возраст», и потом попытаться табом или мышкой перейти на другой , то обработчик события onblur вернёт фокус обратно.
Обращаю внимание на такой случай – если из события onblur сделать event.preventDefault(), то такого же эффекта не будет, потому что onblur срабатывает уже после того, как элемент потерял фокус.
HTML5 и CSS3 вместо focus/blur
Прежде чем мы перейдем к более сложным примерам, использующим JavaScript, давайте рассмотрим 3 примера, когда его Javascript использовать не надо, а достаточно современного HTML/CSS.
Подсветка при фокусировке
Стилизация полей ввода может быть решена средствами CSS (CSS2.1), а именно – селектором :focus:
Автофокус
При загрузке страницы, если на ней существует элемент с атрибутом autofocus – браузер автоматически фокусируется на этом элементе.
Как правило, этот атрибут используется при изначальной загрузке, для страниц поиска и так далее, где главный элемент очевиден.
Плейсхолдер
Плейсхолдер – это значение-подсказка внутри INPUT, которое автоматически исчезает при фокусировке и существует, пока посетитель не начал вводить текст.
В некоторых браузерах этот текст можно стилизовать:
Разрешаем фокус на любом элементе: tabindex
По умолчанию не все элементы поддерживают фокусировку.
Элементы, которые не поддерживают могут отличаться в з ависимости от броузера, но одно лишь верно всегда – заведомо поддерживают focus/blur те элементы, c которыми посетитель может взаимодействовать: , , , и т.д.
С другой стороны, на элементах для форматирования, таких как
, ,
– по умолчанию сфокусироваться нельзя. Но есть способ включить фокусировку и для них.
В HTML имеется атрибут tabindex.
Его основной смысл – это указать номер элемента при переборе элементов клавишей Tab.
То есть, если есть 2 элемента, первый имеет tabindex=»1″, а второй tabindex=»2″, то нажатие Tab при фокусе на первом элементе – переведёт его на второй.
Исключением являются специальные значения:
- tabindex=»0″ делает элемент всегда последним.
- tabindex=»-1″ означает, что клавиша Tab будет элемент игнорировать.
Любой элемент поддерживает фокусировку, если у него есть tabindex.
Порядок перемещения по клавише «Tab» в примере выше должен быть таким: 1 — 2 — 0 (ноль всегда последний). Продвинутые пользователи частенько используют «Tab» для навигации, и ваше хорошее отношение к ним будет несомненно вознаграждено.
Обычно
не поддерживает фокусировку, но здесь есть tabindex.
Делегирование с focus/blur
События focus и blur к сожалению не всплывают ( про всплытие событий я писал здесь).
Это грустно, поскольку мы не можем использовать делегирование с ними. Например, мы не можем сделать так, чтобы при фокусировке в форме она вся подсвечивалась:
Пример выше не работает, т.к. при фокусировке на любом событие focus срабатывает только на этом элементе и не всплывает наверх. Так что обработчик onfocus на форме никогда не сработает.
Что делать? Неужели мы должны присваивать обработчик каждому полю ?
Это забавно, но хотя focus/blur не всплывают, они могут быть пойманы на фазе перехвата.
Вот так сработает:
События focusin/focusout
События focusin/focusout – то же самое, что и focus/blur, только в отличие от них они всплывают.
У них есть 2 особенности:
- Не поддерживаются Firefox
- Должны быть назначены не через on-свойство, а при помощи elem.addEventListener.
Из-за отсутствия подержки Firefox эти события используют редко. Получается, что во всех браузерах можно использовать focus на стадии перехвата, ну а focusin/focusout – в IE8-, где стадии перехвата нет.
Подсветка формы в примере ниже работает во всех браузерах.
Итого
События focus/blur происходят соответственно при получении и снятии фокуса с элемента формы.
У них есть особенности:
- Они не всплывают. Но на фазе перехвата их можно перехватить.
- По умолчанию многие элементы не могут получить фокус. Например, если вы кликните по DIV, то фокусировка на нем не произойдет.Но это можно изменить, если поставить элементу атрибут tabIndex. Этот атрибут также дает возможность контролировать порядок перехода при нажатии Tab.
Задания
Улучшенный плейсхолдер
Реализуйте более удобный плейсхолдер-подсказку на JavaScript через атрибут data-placeholder.
Правила работы плейсхолдера:
- Элемент изначально содержит плейсхолдер. Специальный класс placeholder придает ему синий цвет.
- При фокусировке плейсхолдер показывается уже над полем, становясь «подсказкой».
- При снятии фокуса, подсказка убирается, если поле пустое – плейсхолдер возвращается в него.
Горячие клавиши
.
Изменения, внесенные в поле, можно сохранить обратно в
.
Если же нажать Esc, то
снова превращается в
Редактирование TD по клику
Сделать ячейки таблицы td редактируемыми по клику.
- При клике – ячейка
превращается в редактируемую, можно менять HTML. Размеры ячеек при этом не должны меняться.
- В один момент может редактироваться одна ячейка.
- При редактировании под ячейкой появляются кнопки для приема и отмены редактирования, только клик на них заканчивает редактирование.
Красивый плейсхолдер для INPUT
Создайте для поля красивый, стилизованный плейсхолдер
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Контактная форма с Анимацией на CSS и Jquery
- CSS / CSS3
- Flexbox CSS
- JavaScript
- JavaScript с нуля
- JS и Jquery
- Уроки по 1С-Битрикс
- Контент менеджер
- Авторизация на сайте
- Элементы управления
- Работа с информацией
- Управление структурой
- Сайт на 1С-Битрикс
- Создание landing page
- Видео новости
- Модули расширений
- Расширения и плагины
- Bootstrap
Дополнительное видео
ПОДПИСКА на УРОКИ
Contact Form | Эффект плавающего текста в фокусе на CSS и jquery
Привет друзья с вами Денис, и для вас я подготовили выпуск по анимированной контактной форме с эффектом плавающего текста в фокусе. Возможно, встречали подобные формы в сети, но точно не в таком исполнении.
В уроке покажу несколько фишек, разберем как вставить иконку с сайта fontawesome , при наведение сделаем плавное анимированное, где форма немного приподнимается, а по щелчку полностью выдвигается в верх, повторный клик ее убирает, а когда курсор в фокусе поля, то текст перемещается на верх тем самым освобождая поле для заполнения. Так же разберем, как на HTML5 сделать начальный уровень валидации перед отправкой формы.
И так, приступим к написанию кода.
Создаем каркас формы
Создаем файл стилей и index в котором подключаем css , затем ниже описываем каркас формы.
Делаем обертку с классом .dws-wrapper что бы вы могли легко вставить форму на свои проекты, в нутрии его создаем блок с классом .dws-container при помощи которого в дальнейшем будем проводить позиционирования блока в низу экрана.
В нем вставим заголовок h3 с текстом «Задать вопрос» и за ним форму, присвоим ей класс .formBox .
Сама форма простая, строка будет состоять из описания label , и поля Input . Каждую такую строку оборачиваем в отдельный блок, блоку присвоим класс .inputBox , label с классом .inputText , input с класс .userInput , все это поможет в дальнейшем придать этим полям индивидуальное оформление.
Таких блоков делаем пять штук, и меняем у них текстовое содержимое. Последнее поле input размещаем первым и установим у него checkbox , у label меняем класс и описание.
Внизу добавляем кнопку с классом .button .
Как видите, стараюсь присваивать элементам, если у них планируется другое оформление. В принципе каркас формы готов, валидацию ее сделаем позже, а теперь давайте приступим к описанию самих стилей.
Описываем стили формы
Переходим в файл CSS , для body сбрасываю отступы и установлю шрифт Arial .
Для удобства позиционирую форму посередине, отбираю класс .dws-wrapper который мы присваивали для этих целей, и при помощи transform размещаем форму посередине экрана.
Зададим обводку блока, что бы видеть его границы и хочу сказать, данная манипуляция не обязательна, просто как по мне, так удобнее работать, видя границы пространства, которое занимает блок.
Оформляем поля формы в CSS
Для того что бы отслеживать прозрачность элементов, добавим на задний фон любое изображение.
Затем для формы сделаем внутренние отступы в 30 пик, задаем обводку в 4 пик бордового цвета, и задний фон сделаем белого цвета.
Далее оформляем шапку формы, отбираем класс .dws-container h3 , задаем блоку бордовый цвет background: #8a36a5; , шрифт делаем белый и центруем его посередине. Выравниваем кнопку по середине блока, и увеличим шрифт до 24 пик. Внутренние отступы сверху и снизу по 10 пик, закругляем верхние углы, ширину укажем в процентах 85% от ширины родителя, при наведении отобразим курсор.
Оформляем внешний вида label и input
Начинаем оформление с их родителя, отбираю класс .inputBox и выделяю границы блока, при помощи outline: 1px solid orange; . Сбросим внешние отступы и зададим их только снизу в 20 пик.
Затем приступим к оформлению внутренних элементов. Начнем с блока label с текстовым содержанием. Отбираем класс .inputText , увеличим шрифт до 20 пик., и делаем его немного светлее color: #a5a5a5; .
Теперь задача расположить данный текст в области input и оформить поля для ввода.
Отбираем все input , для этого поможет класса .userInput который до этого присваивали, ширину установим в 100%, и добавим outline , посмотрим тем самым границы полей.
Текст увеличим на 20 пик., задаем ему цвет немного посветлее color: #575454; . и если скроем outline , то в фокусе появляется область выделения, она нам не нужна и для этого что бы ее убрать outline пропишем в none . Скрываем обводку border: none; , а для нижней черты задаем подчеркивание в 1 пик. border-bottom: 1px solid #a5a5a5; ,
Теперь займемся самим текстом и с позиционируем его в input на место области ввода. То-есть, до момента ввода, текст будет расположен в самом поле инпут.
Для этого добавляем родителю .inputBox , position: relative , а блок с классом .inputText позиционируем абсолютно, тем самым при помощи line-height текст опустим ниже.
Описываем стиль, когда курсор в фокусе
Добавим отдельный класс .focus для блока с классом .inputBox , и за счет этого класса, который будет добавляться и удалятся мы сделаем плавное подымать и опускать текста при помощи transform .
Для элементов в фокусе ( .focus .labelTex ) пишем данный стиль. За счет transform: translateY(-30px) , подымаем текст по оси Y, уменьшаем его размер до 14 пик., и меняем цвет на фиолетовый.
Что бы сделать анимированный плавный переход, присвоим блоку с классом .labelText , transition в пол секунды.
Когда стиль класса .focus описан, теперь стоит задача добавить его к блоку с классом .inputBox , у которого на этот момент курсор будет находиться в фокусе. Для примера, если его уберем, текст плавно опускается, добавляем, подымается.
Для того что бы добавить класс родителю по щелчку области input , задействуем библиотеку Jquery. М ожно написать это и при помощи других методов, но в данном случае это самый короткий, который реализуется в несколько строк.
Переходим на сайт Jquery , копируем ссылку и подключаем библиотеку в области head .
В нижней части открываем, тег script и пишем следующее выражение, если класс .userInput в фокусе, тогда выполняем данную функцию. При помощи метода parent() находим родителя верхнего уровня, а это блок с классом .inputBox, он является родителем и добавляем для него класс .focus при помощи метода addClass() .
Я думаю, многие из вас с этой конструкцией знакомы, и особое внимание тут не заостряем.
Проверяем результат, и как видим все срабатывает за исключением того, что клик не можем сделать в области расположения текста. Если добавить для текущего блока label outline , мы увидим его границы, и как раз в этой области, клик не срабатывает.
Все это происходит из-за того что текстом позиционировали на область input , соответственно он на переднем плане и заграждает поле для ввода.
Эта задача легко решается путем прописывания position: relative; для input , теперь они находятся на переднем плане, и остается сделать их прозрачность, для того чтобы появился текст, добавляем background: transparent; .
Теперь, когда курсор в фокусе, получили данную анимацию.
Затем остается удалить класс у родителя, когда элемент теряет фокус. Для этого воспользуемся событием blur() . Которое запустит функцию, где мы проверяем по условию, если поле пустое, тогда у первого родителя добавленный класс .focus удаляем.
Запомните данную конструкцию, так как в практике вы с ней еще не раз столкнетесь, и буде задействовать в свих проектах.
Проверяем полученный результат.
Обводку можно убрать, для блока с формой добавим фиксированную ширину в 350 пик, и при помощи overflow: hidden ; скроем все за ее пределами.
Теперь оформим и обработаем поля для проверки на валидацию.
Валидация форм в HTML5
Добавляем для первого поля соответствующий type и name , и для проверки введенных в него данных добавим атрибут required который по умолчанию у нас всегда выключен.
Сейчас нет возможности нажать кнопку отправить, у нас перекрывает область с соглашением. Для него присвоим отдельный класс .personalDoc . Затем проверяем результат валидации.
Переходим к следующему полю, и так как это email прописываем для него соответствующие type и name , прописывает атрибут required для проверки введенных поля.
Для input с телефоном, добавляем type и name , и дополнительно дописываем регулярное выражение pattern=»\d+» где проверяем на ввод чисел.
Для текстового поля изменим inpyt на textarea и добавим класс .userInput .
Checkbox укажем, что поле обязательное для заполнения при помощи required .
Оформляем соглашение в CSS
Отбираем поле textarea.userInput , делаем высоту в 100 пик, и делаем верхние отступы в 10 пик. что бы набираемый текст не сливался с текстом из label .
У текста с соглашением, изменим цвет и ссылку на серый цвет.
А при наведении на ссылку, уберем подчеркивание и цвет заменим на фиолетовый.
Оформляем кнопку в CSS
Для, оформления кнопки, отбираем ее класс .button , затем меняем цвет кнопки, текст делаем белым, ширину задаем в процентах, высоту в 35 пик., увеличим шрифт до 18 пик и уберем обводку. Зададим отступы с верху и расположим кнопку с левой стороны. Добавим курсор и поменяем цвет ссылки по наведению, делаем кнопку немного ярче. Для плавности изменения цвета добавим классу .button , transition в пол секунды.
Добавляем иконку
С оформлением кнопки закончили, и теперь займемся к добавлению иконки к заголовку. Для этого подключим шрифты при помощи CDN с сайта font-awesome .
На сайте, отберем наш вариант иконки, копируем код и вставим его в заголовке.
Переходим в стили и позиционируем иконку абсолютно родителя, задаем отступы сверху и слева, увеличим ее до 40 пик.
Анимируем появление формы
И последнее что нам остается сделать, это скрыть полностью весь блок кроме верхней части за пределами экрана. Для этого нужно зафиксировать блок в правой нижней части экрана, где по клику на заголовок, плавно выдвигается форму снизу вверх, а по второму клику нужно ее плавно свернуть.
В данном варианте можно воспользоваться Jquery и при помощи его отловить клик, а далее анимировать, но для разнообразии покажу, как это можно реализовать при помощи CSS3, где задействуем checkbox .
И так, допишем немного структуру формы, добавим перед блоком с классом .dws-container еще один Input c атрибутом checkbox . Пропишем для него идентификатор и зададим класс .toggleForm .
Первая из задач, нужно сделать, так что бы по нажатию на кнопку «Задать вопрос», активировался чекбокс, а по второму нажатию активация снималась.
Для этого пропишем заголовку в место h3 тег label и воспользуемся атрибутом for которому передадим id input , добавим дополнительный класс для его оформления.
Проверяем и видим что, по нажатию на заголовок, активируется чекбокс и остается дописать ему стили при данных событиях.
В стилях находим, где задавали оформление для заголовка, меняем .dws-container h3 на .toggleForm , делаем его блочным элементом display: block; . Для иконки меняем h3 i на класс .toggleForm I и немного подкорректируем стили.
Отступы сверху делаем в 18 пик, убираем приоритет увеличения шрифта.
Делаем плавную анимацию появления
Закомментируем стили при помощи, которых центровали блок. Добавляем классу .dws-container , position: fixed; при помои которого закрепляем форму в определенной области экрана и далее задаем отступы, снизу устанавливаем в ноль, а справой стороны в 10%.
Съехала немного иконка, вернем ее в начальное положение, изменим верхние отступы на 7 пик.
Далее при помощи трансформации по оси Y transform : translateY(516px); , опусти форму за пределы экрана.
Добавляем стиль при наведении на кнопку, что бы форма немного приподнялась.
Добавляем плавность анимации при помощи transition: .5s ease;
Далее, отлавливаем клик, если чекбокс заполнен, для блок с классом .dws-container променяем следующий стиль, при помощи трансформации возвращаем форму в нулевое положение.
В завершении скрываем чекбокс, для этого приписываем для него display: none; .
В итоге получили симпатичную форму с различными эффектами.
Теперь вы узнали, как делаются различные эффекты, и как видите все довольно легко и просто реализуется. На базе данного урока сделайте свой пример, и поделись им в комментариях.
Псевдокласс :focus
Псевдокласс :focus определяет стиль для элемента, получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.
Синтаксис ?
Обозначения
Описание
Пример
Указывает тип значения.
A && B
Значения должны выводиться в указанном порядке.
&&
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]
Группирует значения.
[ crop || cross ]
*
Повторять ноль или больше раз.
[, ]*
+
Повторять один или больше раз.
+
?
Указанный тип, слово или группа не является обязательным.
inset?
Повторять не менее A, но не более B раз.
#
Повторять один или больше раз через запятую.
#
×
Пример
Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.
Рис. 1. Результат использования псевдокласса :focus
Примечание
Chrome не добавляет стиль для элемента a , чтобы заставить его понимать правило a:focus , добавьте к элементу атрибут tabindex.
Спецификация ?
Спецификация
Статус
Selectors Level 4
Рабочий проект
Selectors Level 3
Рекомендация
CSS Level 2 (Revision 1)
Рекомендация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
×
Браузеры ?
8
12
1
7
1
1
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Make: изменение фокуса css другого класса
Скажем, у меня есть следующий код:
Очевидно, что этот код не работает. Я хочу, чтобы какой-то конкретный css выполнялся, когда фокусировался на моем ящике ввода. Это вообще возможно?
Я специально не ищу решения html/css. Любое решение, которое может достичь этого, приветствуется.
Мой код выше — это просто простой пример. Мой вопрос очень прост. Можно ли изменить стиль на любом элементе на вашем веб-сайте, используя: focus на поле ввода.
Использование псевдоклассов в качестве действия для изменения других элементов может быть выполнено только в том случае, если другие элементы являются прямыми или косвенными братьями или дочерними элементами элемента, который имеет псевдокласс (например, :hover или :focus ). Это потому, что селектор дочерних/дочерних элементов CSS довольно ограничительный.
Вы можете использовать селектор > для выбора прямого дочернего элемента и селектор + для выбора прямого родства. Например, если у вас есть следующий HTML-код:
Вы можете стилизовать кнопку, когда текстовое поле имеет фокус (потому что это прямой родной текст текстового поля), но нет никакого способа стирать произвольный абзац из-за того, что текстовое поле получает фокус (потому что оно не является ни ребенком, ни родным братом, он является родным родителем) без использования клиентских сценариев (JavaScript, jQuery и т.д.).
Этот CSS будет стилизовать кнопку отправки и может быть изменен, чтобы выбрать любого прямого или косвенного ребенка или родного брата:
Использование Javascript, конечно же, обладает большей гибкостью. focus и blur события ( Firefox еще не поддерживает focusin и focusout ) можно использовать для переключения классов CSS. Вот пример, демонстрирующий методы CSS и JavaScript для достижения этого.
Здесь эквивалент jQuery приведенного выше кода, если это ваше замятие.
Обратите внимание, что если вы решите, что хотите сделать что-то подобное, за исключением использования триггера «зависания», а не «фокуса», вы можете использовать JavaScript mouseover и mouseout или jQuery .hover() , которая принимает два аргумента (обработчик для ввода наведения, а другой — для удаления зависания).
Псевдоклассы CSS :focus, :hover и :active
Если вы работали с CSS, то знаете, что стили применяются к селекторам, которые, в свою очередь, являются HTML-элементами. Но не всегда. Существует фантомная категория классов, которая возникает только в определенных состояниях объекта. Например, нажатая кнопка или выбранное поле ввода. Для таких особых случаев существуют псевдоклассы CSS :focus, :hover, :active.
Динамические псевдоклассы
CSS определяет три динамических псевдокласса, :focus, :hover, :active. Они меняют внешний вид объекта при определенных действиях пользователя. Это означает что для их появления нужно обязательное условие:
В этом примере, пока пользователь не наведет курсор мышки на элемент с классом button, записанные в :hover стили никак не проявятся.
Традиционно псевдоклассы используют для обработки ссылок и кнопок. Но диапазон возможностей гораздо шире. В CSS :focus ссылается на объект веб-страницы, которому принадлежит фокус ввода. Чаще всего это поля форм регистрации и поиска.
:hover отвечает за элементы, над которыми размещен указатель мышки или другого устройства. В момент когда пользователь активирует какой-то объект на странице, например, кликает по ссылке, появляется псевдокласс :active
Возможности применения псевдоклассов
Стили для :active, :focus, :hover — это своеобразный способ общения с пользователем. Так вы подсказываете куда вводить данные, подчеркивает ссылки, выделяете элементы по которым можно нажать. С помощью удачных эффектов вы мотивируете посетителя ввести адрес электронной почты и подписаться на вашу рассылку. Благодаря красивым кнопкам «Войти!», «Читать дальше!» у тех, кто случайно попал на страницу, возникнет желание путешествовать по сайту дальше.
Но не применяйте псевдоклассы слишком усердно. Если вы добавите :hover почти ко всем элементам, у посетителей вашего сайта может начаться морская болезнь от массы увеличивающихся или мигающих объектов. Применяйте CSS псевдо-класс focus для изменения цвета рамки полей, не более. Лучший способ грамотно назначить :hover — это сделать цвет шрифта темнее при наведении мышки. Но не трогайте размер — от этого могут пострадать соседние элементы.
При фокусе изменить цвет родительского элемента
02.07.2015, 20:56
Не могу изменить цвет элемента в CSS
Здравствуйте! Я новичок в CSS, знаком не столь близко. Не могу изменить цвет f8f8f8 элемента.
Изменить цвет при наведении
нужно чтоб при наведении мыши на картинку показывала свой цвет, наоборот — становилась серой.
Изменить цвет ссылки при наведении
Буду благодарен тем кто поможет. Человек я уже не молодой, много чего перечитал и перепробовал. Не.
Изменить цвет ссылки при наведении на li
Есть вот такой код: .nav ul li a:active, .nav ul li a:hover < color: #280028; .
Использование атрибута HTML tabindex и псевдокласса CSS :focus
20 марта 2020 | Опубликовано в css | 2 Комментариев »
Если вы интересуетесь обеспечением доступности веб-сайта, вам, вероятно, знакомы эти возможности. Но мы не очень много пишем об обеспечении доступности веб-сайта, хотя эта тема тоже важна. Представим, что у нас есть следующая страница с различными элементами, начинающаяся, например, с поля ввода:
Если сначала поле ввода поискового запроса в фокусе, затем используется табуляция для перемещения по элементам, то фокус переходит от поля ввода поискового запроса на первую ссылку, перескакивая через заголовок и текст, затем на вторую ссылку и так далее. Чтобы было ясно видно, что находится в фокусе, с помощью псевдокласса фокус добавлен цвет фона.
Но что делать, если необходимо, чтобы все элементы страницы могли оказаться в фокусе? Нужно добавить атрибут HTML tabindex в код HTML тому элементу, который должен оказываться в фокусе:
Теперь при использовании табуляции для перемещения по элементам все элементы будут оказываться в фокусе и выделяться цветом фона, в том числе все текстовые элементы.
Но обратите внимание, что любой из этих элементов будет оказываться в фокусе и к нему будут применяться стили для элемента в фокусе, даже если нажать на него указателем мыши.
Это значит, что можно создать что-то наподобие следующего примера. Это игра на чистом CSS под названием «Найдите котенка»:
В этом примере используется тот же способ, что и в предыдущем: изменение стилей для элемента в фокусе, но значения атрибута HTML tabindex добавлено всем вложенным блокам, так что все они могут оказаться в фокусе как при использовании табуляции, так и при нажатии указателем мыши.
Если использовать воображение и другие свойства CSS, можно создать другие интересные эффекты.
Но постарайтесь использовать этот способ только там, где он действительно нужен, как и любые другие усложнения.
Надеемся, этот способ использования атрибута HTML tabindex и псевдокласса CSS фокус показался Вам интересным, хотя он, как мы уже отмечали, вероятно, уже знаком опытным разработчикам.
CSS псевдокласс :focus
Значение и применение
Псевдокласс :focus производит выбор элемента, который в настоящий момент находится в фокусе (допускается использовать на элементы, которые принимают события клавиатуры или другие данные, вводимые пользователем).
Поддержка браузерами
Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
:focus
4.0
2.0
9.6
3.1
8.0
12.0
CSS синтаксис:
Версия CSS
Пример использования
Пример использования псевдокласса :focus. CSS селекторы
Кажется, вы используете блокировщик рекламы 🙁
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Если ввести что-то нецифровое в поле «возраст», и потом попытаться табом или мышкой перейти на другой , то обработчик события onblur вернёт фокус обратно.
Обычно
не поддерживает фокусировку, но здесь есть tabindex.
Изменения, внесенные в поле, можно сохранить обратно в
Если же нажать Esc, то
Красивый плейсхолдер для INPUT
Создайте для поля красивый, стилизованный плейсхолдер
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Контактная форма с Анимацией на CSS и Jquery
- CSS / CSS3
- Flexbox CSS
- JavaScript
- JavaScript с нуля
- JS и Jquery
- Уроки по 1С-Битрикс
- Контент менеджер
- Авторизация на сайте
- Элементы управления
- Работа с информацией
- Управление структурой
- Сайт на 1С-Битрикс
- Создание landing page
- Контент менеджер
- Видео новости
- Модули расширений
- Расширения и плагины
- Bootstrap
Дополнительное видео
ПОДПИСКА на УРОКИ
Contact Form | Эффект плавающего текста в фокусе на CSS и jquery
Привет друзья с вами Денис, и для вас я подготовили выпуск по анимированной контактной форме с эффектом плавающего текста в фокусе. Возможно, встречали подобные формы в сети, но точно не в таком исполнении.
В уроке покажу несколько фишек, разберем как вставить иконку с сайта fontawesome , при наведение сделаем плавное анимированное, где форма немного приподнимается, а по щелчку полностью выдвигается в верх, повторный клик ее убирает, а когда курсор в фокусе поля, то текст перемещается на верх тем самым освобождая поле для заполнения. Так же разберем, как на HTML5 сделать начальный уровень валидации перед отправкой формы.
И так, приступим к написанию кода.
Создаем каркас формы
Создаем файл стилей и index в котором подключаем css , затем ниже описываем каркас формы.
Делаем обертку с классом .dws-wrapper что бы вы могли легко вставить форму на свои проекты, в нутрии его создаем блок с классом .dws-container при помощи которого в дальнейшем будем проводить позиционирования блока в низу экрана.
В нем вставим заголовок h3 с текстом «Задать вопрос» и за ним форму, присвоим ей класс .formBox .
Сама форма простая, строка будет состоять из описания label , и поля Input . Каждую такую строку оборачиваем в отдельный блок, блоку присвоим класс .inputBox , label с классом .inputText , input с класс .userInput , все это поможет в дальнейшем придать этим полям индивидуальное оформление.
Таких блоков делаем пять штук, и меняем у них текстовое содержимое. Последнее поле input размещаем первым и установим у него checkbox , у label меняем класс и описание.
Внизу добавляем кнопку с классом .button .
Как видите, стараюсь присваивать элементам, если у них планируется другое оформление. В принципе каркас формы готов, валидацию ее сделаем позже, а теперь давайте приступим к описанию самих стилей.
Описываем стили формы
Переходим в файл CSS , для body сбрасываю отступы и установлю шрифт Arial .
Для удобства позиционирую форму посередине, отбираю класс .dws-wrapper который мы присваивали для этих целей, и при помощи transform размещаем форму посередине экрана.
Зададим обводку блока, что бы видеть его границы и хочу сказать, данная манипуляция не обязательна, просто как по мне, так удобнее работать, видя границы пространства, которое занимает блок.
Оформляем поля формы в CSS
Для того что бы отслеживать прозрачность элементов, добавим на задний фон любое изображение.
Затем для формы сделаем внутренние отступы в 30 пик, задаем обводку в 4 пик бордового цвета, и задний фон сделаем белого цвета.
Далее оформляем шапку формы, отбираем класс .dws-container h3 , задаем блоку бордовый цвет background: #8a36a5; , шрифт делаем белый и центруем его посередине. Выравниваем кнопку по середине блока, и увеличим шрифт до 24 пик. Внутренние отступы сверху и снизу по 10 пик, закругляем верхние углы, ширину укажем в процентах 85% от ширины родителя, при наведении отобразим курсор.
Оформляем внешний вида label и input
Начинаем оформление с их родителя, отбираю класс .inputBox и выделяю границы блока, при помощи outline: 1px solid orange; . Сбросим внешние отступы и зададим их только снизу в 20 пик.
Затем приступим к оформлению внутренних элементов. Начнем с блока label с текстовым содержанием. Отбираем класс .inputText , увеличим шрифт до 20 пик., и делаем его немного светлее color: #a5a5a5; .
Теперь задача расположить данный текст в области input и оформить поля для ввода.
Отбираем все input , для этого поможет класса .userInput который до этого присваивали, ширину установим в 100%, и добавим outline , посмотрим тем самым границы полей.
Текст увеличим на 20 пик., задаем ему цвет немного посветлее color: #575454; . и если скроем outline , то в фокусе появляется область выделения, она нам не нужна и для этого что бы ее убрать outline пропишем в none . Скрываем обводку border: none; , а для нижней черты задаем подчеркивание в 1 пик. border-bottom: 1px solid #a5a5a5; ,
Теперь займемся самим текстом и с позиционируем его в input на место области ввода. То-есть, до момента ввода, текст будет расположен в самом поле инпут.
Для этого добавляем родителю .inputBox , position: relative , а блок с классом .inputText позиционируем абсолютно, тем самым при помощи line-height текст опустим ниже.
Описываем стиль, когда курсор в фокусе
Добавим отдельный класс .focus для блока с классом .inputBox , и за счет этого класса, который будет добавляться и удалятся мы сделаем плавное подымать и опускать текста при помощи transform .
Для элементов в фокусе ( .focus .labelTex ) пишем данный стиль. За счет transform: translateY(-30px) , подымаем текст по оси Y, уменьшаем его размер до 14 пик., и меняем цвет на фиолетовый.
Что бы сделать анимированный плавный переход, присвоим блоку с классом .labelText , transition в пол секунды.
Когда стиль класса .focus описан, теперь стоит задача добавить его к блоку с классом .inputBox , у которого на этот момент курсор будет находиться в фокусе. Для примера, если его уберем, текст плавно опускается, добавляем, подымается.
Для того что бы добавить класс родителю по щелчку области input , задействуем библиотеку Jquery. М ожно написать это и при помощи других методов, но в данном случае это самый короткий, который реализуется в несколько строк.
Переходим на сайт Jquery , копируем ссылку и подключаем библиотеку в области head .
В нижней части открываем, тег script и пишем следующее выражение, если класс .userInput в фокусе, тогда выполняем данную функцию. При помощи метода parent() находим родителя верхнего уровня, а это блок с классом .inputBox, он является родителем и добавляем для него класс .focus при помощи метода addClass() .
Я думаю, многие из вас с этой конструкцией знакомы, и особое внимание тут не заостряем.
Проверяем результат, и как видим все срабатывает за исключением того, что клик не можем сделать в области расположения текста. Если добавить для текущего блока label outline , мы увидим его границы, и как раз в этой области, клик не срабатывает.
Все это происходит из-за того что текстом позиционировали на область input , соответственно он на переднем плане и заграждает поле для ввода.
Эта задача легко решается путем прописывания position: relative; для input , теперь они находятся на переднем плане, и остается сделать их прозрачность, для того чтобы появился текст, добавляем background: transparent; .
Теперь, когда курсор в фокусе, получили данную анимацию.
Затем остается удалить класс у родителя, когда элемент теряет фокус. Для этого воспользуемся событием blur() . Которое запустит функцию, где мы проверяем по условию, если поле пустое, тогда у первого родителя добавленный класс .focus удаляем.
Запомните данную конструкцию, так как в практике вы с ней еще не раз столкнетесь, и буде задействовать в свих проектах.
Проверяем полученный результат.
Обводку можно убрать, для блока с формой добавим фиксированную ширину в 350 пик, и при помощи overflow: hidden ; скроем все за ее пределами.
Теперь оформим и обработаем поля для проверки на валидацию.
Валидация форм в HTML5
Добавляем для первого поля соответствующий type и name , и для проверки введенных в него данных добавим атрибут required который по умолчанию у нас всегда выключен.
Сейчас нет возможности нажать кнопку отправить, у нас перекрывает область с соглашением. Для него присвоим отдельный класс .personalDoc . Затем проверяем результат валидации.
Переходим к следующему полю, и так как это email прописываем для него соответствующие type и name , прописывает атрибут required для проверки введенных поля.
Для input с телефоном, добавляем type и name , и дополнительно дописываем регулярное выражение pattern=»\d+» где проверяем на ввод чисел.
Для текстового поля изменим inpyt на textarea и добавим класс .userInput .
Checkbox укажем, что поле обязательное для заполнения при помощи required .
Оформляем соглашение в CSS
Отбираем поле textarea.userInput , делаем высоту в 100 пик, и делаем верхние отступы в 10 пик. что бы набираемый текст не сливался с текстом из label .
У текста с соглашением, изменим цвет и ссылку на серый цвет.
А при наведении на ссылку, уберем подчеркивание и цвет заменим на фиолетовый.
Оформляем кнопку в CSS
Для, оформления кнопки, отбираем ее класс .button , затем меняем цвет кнопки, текст делаем белым, ширину задаем в процентах, высоту в 35 пик., увеличим шрифт до 18 пик и уберем обводку. Зададим отступы с верху и расположим кнопку с левой стороны. Добавим курсор и поменяем цвет ссылки по наведению, делаем кнопку немного ярче. Для плавности изменения цвета добавим классу .button , transition в пол секунды.
Добавляем иконку
С оформлением кнопки закончили, и теперь займемся к добавлению иконки к заголовку. Для этого подключим шрифты при помощи CDN с сайта font-awesome .
На сайте, отберем наш вариант иконки, копируем код и вставим его в заголовке.
Переходим в стили и позиционируем иконку абсолютно родителя, задаем отступы сверху и слева, увеличим ее до 40 пик.
Анимируем появление формы
И последнее что нам остается сделать, это скрыть полностью весь блок кроме верхней части за пределами экрана. Для этого нужно зафиксировать блок в правой нижней части экрана, где по клику на заголовок, плавно выдвигается форму снизу вверх, а по второму клику нужно ее плавно свернуть.
В данном варианте можно воспользоваться Jquery и при помощи его отловить клик, а далее анимировать, но для разнообразии покажу, как это можно реализовать при помощи CSS3, где задействуем checkbox .
И так, допишем немного структуру формы, добавим перед блоком с классом .dws-container еще один Input c атрибутом checkbox . Пропишем для него идентификатор и зададим класс .toggleForm .
Первая из задач, нужно сделать, так что бы по нажатию на кнопку «Задать вопрос», активировался чекбокс, а по второму нажатию активация снималась.
Для этого пропишем заголовку в место h3 тег label и воспользуемся атрибутом for которому передадим id input , добавим дополнительный класс для его оформления.
Проверяем и видим что, по нажатию на заголовок, активируется чекбокс и остается дописать ему стили при данных событиях.
В стилях находим, где задавали оформление для заголовка, меняем .dws-container h3 на .toggleForm , делаем его блочным элементом display: block; . Для иконки меняем h3 i на класс .toggleForm I и немного подкорректируем стили.
Отступы сверху делаем в 18 пик, убираем приоритет увеличения шрифта.
Делаем плавную анимацию появления
Закомментируем стили при помощи, которых центровали блок. Добавляем классу .dws-container , position: fixed; при помои которого закрепляем форму в определенной области экрана и далее задаем отступы, снизу устанавливаем в ноль, а справой стороны в 10%.
Съехала немного иконка, вернем ее в начальное положение, изменим верхние отступы на 7 пик.
Далее при помощи трансформации по оси Y transform : translateY(516px); , опусти форму за пределы экрана.
Добавляем стиль при наведении на кнопку, что бы форма немного приподнялась.
Добавляем плавность анимации при помощи transition: .5s ease;
Далее, отлавливаем клик, если чекбокс заполнен, для блок с классом .dws-container променяем следующий стиль, при помощи трансформации возвращаем форму в нулевое положение.
В завершении скрываем чекбокс, для этого приписываем для него display: none; .
В итоге получили симпатичную форму с различными эффектами.
Теперь вы узнали, как делаются различные эффекты, и как видите все довольно легко и просто реализуется. На базе данного урока сделайте свой пример, и поделись им в комментариях.
Псевдокласс :focus
Псевдокласс :focus определяет стиль для элемента, получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.
Синтаксис ?
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [, ]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
×
Пример
Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.
Рис. 1. Результат использования псевдокласса :focus
Примечание
Chrome не добавляет стиль для элемента a , чтобы заставить его понимать правило a:focus , добавьте к элементу атрибут tabindex.
Спецификация ?
| Спецификация | Статус |
|---|---|
| Selectors Level 4 | Рабочий проект |
| Selectors Level 3 | Рекомендация |
| CSS Level 2 (Revision 1) | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
×
Браузеры ?
| 8 | 12 | 1 | 7 | 1 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Make: изменение фокуса css другого класса
Скажем, у меня есть следующий код:
Очевидно, что этот код не работает. Я хочу, чтобы какой-то конкретный css выполнялся, когда фокусировался на моем ящике ввода. Это вообще возможно?
Я специально не ищу решения html/css. Любое решение, которое может достичь этого, приветствуется.
Мой код выше — это просто простой пример. Мой вопрос очень прост. Можно ли изменить стиль на любом элементе на вашем веб-сайте, используя: focus на поле ввода.
Использование псевдоклассов в качестве действия для изменения других элементов может быть выполнено только в том случае, если другие элементы являются прямыми или косвенными братьями или дочерними элементами элемента, который имеет псевдокласс (например, :hover или :focus ). Это потому, что селектор дочерних/дочерних элементов CSS довольно ограничительный.
Вы можете использовать селектор > для выбора прямого дочернего элемента и селектор + для выбора прямого родства. Например, если у вас есть следующий HTML-код:
Вы можете стилизовать кнопку, когда текстовое поле имеет фокус (потому что это прямой родной текст текстового поля), но нет никакого способа стирать произвольный абзац из-за того, что текстовое поле получает фокус (потому что оно не является ни ребенком, ни родным братом, он является родным родителем) без использования клиентских сценариев (JavaScript, jQuery и т.д.).
Этот CSS будет стилизовать кнопку отправки и может быть изменен, чтобы выбрать любого прямого или косвенного ребенка или родного брата:
Использование Javascript, конечно же, обладает большей гибкостью. focus и blur события ( Firefox еще не поддерживает focusin и focusout ) можно использовать для переключения классов CSS. Вот пример, демонстрирующий методы CSS и JavaScript для достижения этого.
Здесь эквивалент jQuery приведенного выше кода, если это ваше замятие.
Обратите внимание, что если вы решите, что хотите сделать что-то подобное, за исключением использования триггера «зависания», а не «фокуса», вы можете использовать JavaScript mouseover и mouseout или jQuery .hover() , которая принимает два аргумента (обработчик для ввода наведения, а другой — для удаления зависания).
Псевдоклассы CSS :focus, :hover и :active
Если вы работали с CSS, то знаете, что стили применяются к селекторам, которые, в свою очередь, являются HTML-элементами. Но не всегда. Существует фантомная категория классов, которая возникает только в определенных состояниях объекта. Например, нажатая кнопка или выбранное поле ввода. Для таких особых случаев существуют псевдоклассы CSS :focus, :hover, :active.
Динамические псевдоклассы
CSS определяет три динамических псевдокласса, :focus, :hover, :active. Они меняют внешний вид объекта при определенных действиях пользователя. Это означает что для их появления нужно обязательное условие:
В этом примере, пока пользователь не наведет курсор мышки на элемент с классом button, записанные в :hover стили никак не проявятся.
Традиционно псевдоклассы используют для обработки ссылок и кнопок. Но диапазон возможностей гораздо шире. В CSS :focus ссылается на объект веб-страницы, которому принадлежит фокус ввода. Чаще всего это поля форм регистрации и поиска.
:hover отвечает за элементы, над которыми размещен указатель мышки или другого устройства. В момент когда пользователь активирует какой-то объект на странице, например, кликает по ссылке, появляется псевдокласс :active
Возможности применения псевдоклассов
Стили для :active, :focus, :hover — это своеобразный способ общения с пользователем. Так вы подсказываете куда вводить данные, подчеркивает ссылки, выделяете элементы по которым можно нажать. С помощью удачных эффектов вы мотивируете посетителя ввести адрес электронной почты и подписаться на вашу рассылку. Благодаря красивым кнопкам «Войти!», «Читать дальше!» у тех, кто случайно попал на страницу, возникнет желание путешествовать по сайту дальше.
Но не применяйте псевдоклассы слишком усердно. Если вы добавите :hover почти ко всем элементам, у посетителей вашего сайта может начаться морская болезнь от массы увеличивающихся или мигающих объектов. Применяйте CSS псевдо-класс focus для изменения цвета рамки полей, не более. Лучший способ грамотно назначить :hover — это сделать цвет шрифта темнее при наведении мышки. Но не трогайте размер — от этого могут пострадать соседние элементы.
При фокусе изменить цвет родительского элемента
Не могу изменить цвет элемента в CSS
Здравствуйте! Я новичок в CSS, знаком не столь близко. Не могу изменить цвет f8f8f8 элемента.
Изменить цвет при наведении
нужно чтоб при наведении мыши на картинку показывала свой цвет, наоборот — становилась серой.
Изменить цвет ссылки при наведении
Буду благодарен тем кто поможет. Человек я уже не молодой, много чего перечитал и перепробовал. Не.
Изменить цвет ссылки при наведении на li
Есть вот такой код: .nav ul li a:active, .nav ul li a:hover < color: #280028; .
Использование атрибута HTML tabindex и псевдокласса CSS :focus
20 марта 2020 | Опубликовано в css | 2 Комментариев »
Если вы интересуетесь обеспечением доступности веб-сайта, вам, вероятно, знакомы эти возможности. Но мы не очень много пишем об обеспечении доступности веб-сайта, хотя эта тема тоже важна. Представим, что у нас есть следующая страница с различными элементами, начинающаяся, например, с поля ввода:
Если сначала поле ввода поискового запроса в фокусе, затем используется табуляция для перемещения по элементам, то фокус переходит от поля ввода поискового запроса на первую ссылку, перескакивая через заголовок и текст, затем на вторую ссылку и так далее. Чтобы было ясно видно, что находится в фокусе, с помощью псевдокласса фокус добавлен цвет фона.
Но что делать, если необходимо, чтобы все элементы страницы могли оказаться в фокусе? Нужно добавить атрибут HTML tabindex в код HTML тому элементу, который должен оказываться в фокусе:
Теперь при использовании табуляции для перемещения по элементам все элементы будут оказываться в фокусе и выделяться цветом фона, в том числе все текстовые элементы.
Но обратите внимание, что любой из этих элементов будет оказываться в фокусе и к нему будут применяться стили для элемента в фокусе, даже если нажать на него указателем мыши.
Это значит, что можно создать что-то наподобие следующего примера. Это игра на чистом CSS под названием «Найдите котенка»:
В этом примере используется тот же способ, что и в предыдущем: изменение стилей для элемента в фокусе, но значения атрибута HTML tabindex добавлено всем вложенным блокам, так что все они могут оказаться в фокусе как при использовании табуляции, так и при нажатии указателем мыши.
Если использовать воображение и другие свойства CSS, можно создать другие интересные эффекты.
Но постарайтесь использовать этот способ только там, где он действительно нужен, как и любые другие усложнения.
Надеемся, этот способ использования атрибута HTML tabindex и псевдокласса CSS фокус показался Вам интересным, хотя он, как мы уже отмечали, вероятно, уже знаком опытным разработчикам.
CSS псевдокласс :focus
Значение и применение
Псевдокласс :focus производит выбор элемента, который в настоящий момент находится в фокусе (допускается использовать на элементы, которые принимают события клавиатуры или другие данные, вводимые пользователем).
Поддержка браузерами
| Селектор | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| :focus | 4.0 | 2.0 | 9.6 | 3.1 | 8.0 | 12.0 |
CSS синтаксис:
Версия CSS
Пример использования
Пример использования псевдокласса :focus. CSS селекторы
Кажется, вы используете блокировщик рекламы 🙁
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
