Active для кнопки css

:active

Псевдокласс :active позволяет задать стили для элемента, с которым происходит взаимодействие прямо сейчас. Например, можно задать кнопке стиль, который будет виден в тот краткий миг, когда на кнопке зажата клавиша мыши.

Пример

Скопировать ссылку «Пример» Скопировано

Сделаем объёмную кнопку, у которой будет меняться цвет фона и текста в активной фазе.

 button  padding: 2.5rem; border: 0; border-radius: 2.5rem; font-size: 2.5rem; background-color: #bada55; cursor: pointer; transition: background 0.3s, color 0.3s;> button:active  color: white; background-color: purple;> button  padding: 2.5rem; border: 0; border-radius: 2.5rem; font-size: 2.5rem; background-color: #bada55; cursor: pointer; transition: background 0.3s, color 0.3s; > button:active  color: white; background-color: purple; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

К любому селектору добавляем двоеточие и ключевое слово active .

Селектор по тегу в состоянии :active

Скопировать ссылку «Селектор по тегу в состоянии :active» Скопировано

 a:active  /* Стили */> a:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор по классу в состоянии :active

Скопировать ссылку «Селектор по классу в состоянии :active» Скопировано

 .link:active  /* Стили */> .link:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Составной селектор в состоянии :active

Скопировать ссылку «Составной селектор в состоянии :active» Скопировано

 li .link:focus  /* Стили */> li .link:focus  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор по id в состоянии :active

Скопировать ссылку «Селектор по id в состоянии :active» Скопировано

 #id:active  /* Стили */> #id:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор по классу и его псевдоэлемент в состоянии :active

Скопировать ссылку «Селектор по классу и его псевдоэлемент в состоянии :active» Скопировано

 .link::before:active  /* Стили */> .link::before:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

В момент нажатия на элемент при помощи кнопки мыши или клавиши клавиатуры этому самому элементу присваивается виртуальный класс :active , который можно стилизовать. За присвоение этого класса отвечает движок браузера, нам о самом процессе присвоения думать не нужно.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 Часто, если дизайнер не позаботился об отрисовке состояния :active для кнопок, можно задать стили сразу и для наведения курсора и для активного состояния:

 button:hover,button:active  /* Стили */> button:hover, button:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Дизайнеры и верстальщики почему-то часто забывают про тот короткий промежуток времени, когда пользователь нажал кнопку мыши, но ещё её не отпустил. И не стилизуют состояние :active . Но «дьявол кроется в деталях», и если в вашем интерфейсе будут продуманы даже такие небольшие элементы, то он будет создавать ощущение опрятности и заботы о пользователе.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :focus — :hover — :active .

Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.

Источник

:active

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link , :hover и :visited , описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active .

Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.

Синтаксис

Пример

Активные ссылки

HTML

p>Этот абзац содержит ссылку: a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.a> У абзаца фон станет серым при нажатии на него или на ссылку. p> 

CSS

a:link  color: blue; > /* Непосещённые ссылки */ a:visited  color: purple; > /* Посещённые ссылки */ a:hover  background: yellow; > /* Ссылки при наведении */ a:active  color: red; > /* Активные ссылки */ p:active  background: #eee; > /* Активные абзацы */ 

Результат

Активные элементы формы

HTML

form> label for="my-button">Моя кнопка: label> button id="my-button" type="button">Попробуй Нажать Меня или Мою подсказку!button> form> 

CSS

form :active  color: red; > form button  background: white; > 

Result

Спецификации

Спецификация	Статус	Комментарий
HTML Living Standard Определение ‘:active’ в этой спецификации.	Живой стандарт
Selectors Level 4 Определение ‘:active’ в этой спецификации.	Рабочий черновик	Без изменений
Selectors Level 3 Определение ‘:active’ в этой спецификации.	Рекомендация	Без изменений
CSS Level 2 (Revision 1) Определение ‘:active’ в этой спецификации.	Рекомендация	Без изменений
CSS Level 1 Определение ‘:active’ в этой спецификации.	Рекомендация	Первоначальное определение

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 22 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Оформляйте стили наведения, фокуса и активного состояния по-разному

В течение многих лет я оформлял состояния элементов :hover , :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.

Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.

Стилизация наведения (:hover)

:hover срабатывает, когда пользователь наводит на элемент курсор мыши.

Обычно это состояние заключается в изменении цвета фона background-color и/или текста color . Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.

Стилизация фокуса (:focus)

:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:

1. Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex=»-1″ , но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.
2. В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов
3. При клике на ссылку , фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте href указан существующий на этой же странице id

Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.

В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:

1. Добавление обводки (outline)
2. Создание анимаций
3. Изменение background-color
4. Изменение color

Вы можете использовать комбинации свойств outline , border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».

button < background-color: #dedede; >button:hover < background-color: #aaa; >button:focus

Стилизация активного состояния (:active)

При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.

На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active . Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:

1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
2. Удержание кнопки пробела (на кнопках)

Две особенности, которые следует принять к сведению:

1. Удержание пробела вызывает состояние :active у кнопок (), но при удержании Enter этого не происходит
2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

Стили ссылок по умолчанию

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus

При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus . В Safari – только состояние :active (проверено только на Mac OS)
2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на

1. Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.

document.addEventListener('click', event => < if (event.target.matches('button')) < event.target.focus() >>) 

Добавление этого кода изменит поведение нажатия кнопок на следующее:

1. При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
2. Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах

Поведение кнопок в Safari после добавления фрагмента JS-кода

Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

Волшебная комбинация

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

.element:hover, .element:active < /* Изменить цвет фона/текста */ >.element:focus < /* Показать обводку */ >

1. Когда пользователь наводит на элемент, меняется background-color (и/или color ). Происходит отклик.
2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

Для пользователей клавиатуры:

1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
2. Когда они взаимодействуют с элементом, меняется background-color (и/или color ). Происходит отклик.

1. Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
2. Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

Вот что произойдёт в Safari и Firefox на Mac OS:

1. Когда пользователь держит кнопку мыши нажатой, ничего не меняется
2. Когда пользователи отпускают кнопку, элемент получает фокус

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover , :focus и :active по отдельности.

.element:hover < /* Изменить цвет фона/текста */ >.element:active < /* Иные изменения в цвете фона и текста */ >.element:focus < /* Показать обводку */ >

Поведение кнопки в Safari, если были стилизованы все три состояния

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

Источник