:focus

    0
    1420

    Псевдокласс :focus определяет стиль для элемента получающего фокус. Чаще всего применяется на ссылках и элементах формы.

    Такие элементы формы как <button>, <input> и <textarea> имеют состояние именуемое фокусом. Другими словами, например, когда пользователь задействует какое-либо текстовое поле (начинает печатать), оно находится в состоянии фокуса.

    По умолчанию браузер устанавливает стили для фокуса элементов используя свойство outline. Outline похож на border, но не является им. Чтобы убрать стиль фокуса по умолчанию, достаточно написать следующее правило:

    Пример

    Следующие правила заменяют правила фокуса установленные по умолчанию браузером, теперь при фокусе на элемент контур (outline) отсутствует, фон черного цвета, цвет текста белого цвета.

    Следующие правила CSS изменяют фон элементов форм, а именно input и textarea, устанавливается голубой цвет фона и красная рамка вокруг поля.

    Демонстрация

    Поддержка браузерами

    Псевдокласс :focus поддерживается всеми основными браузерами: Chrome, Firefox, Safari, Opera 7+, Internet Explorer 7+, на Android и iOS.

    ПОДЕЛИТЬСЯ
    Предыдущая статья:first-of-type
    Следующая статья:hover
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя