В чем разница между: focus и: активным?

Ответ 1

:focus и :active - два разных состояния.

:focus представляет состояние, когда элемент является выбранным в данный момент элементом для приема ввода от устройств ввода (клавиатура). :active представляет состояние, когда элемент в настоящее время активируется пользователем.

Положим это на перспективу с примером. Пусть говорят, что a <button>. <button> не будет иметь никакого состояния для начала. Он просто существует. Если мы используем Tab для "фокусировки" на <button>, теперь он переходит в состояние :focus. Если вы затем щелкните (или нажмите space), вы затем сделаете кнопку в ее состоянии (:active).

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

Пример:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused, where my text just turns red
</button>

Ответ 2

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Источник: Псевдоклассы CSS

Ответ 3

Существует четыре случая.

• По умолчанию активные и фокус оба отключены.
• Когда вы переходите к циклическому перемещению элементов фокусировки, они будут вводить :focus (без активного).
• Когда вы нажимаете на элемент без фокусировки, он вводит :active (без фокуса).
• Когда вы нажимаете на фокусируемый элемент, он вводит :active:focus (активный и фокус одновременно).

Пример:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Когда страница загружается, то в случае 1. Когда вы нажимаете вкладку, вы фокусируете второй div и видите, что он показывает случай 2. Когда вы нажимаете на первый div, вы видите случай 3. Когда вы нажимаете второй div, вы см. случай 4.

Является ли элемент фокусируемым или нет еще один вопрос. Большинство не по умолчанию. Но безопасно предположить, что <a>, <input>, <textarea> по умолчанию настраиваются.

Ответ 4

: фокус - это когда элемент способен принимать входные данные - курсор в поле ввода или ссылку, на которую была установлена ​​вкладка.

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

Ответ 5

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

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

Ответ 6

Фокус может быть задан только с клавиатуры, но элемент можно активировать как с помощью мыши, так и с клавиатуры.

Если использовать: сосредоточиться на ссылке, правило стиля применимо только при нажатии на botton на клавиатуре.

Ответ 7

Использование "focus" даст пользователям клавиатуры тот же эффект, что и пользователи мыши, когда они наведите указатель мыши. "Активный" необходим, чтобы получить тот же эффект в Internet Explorer.

Реальность такова, что эти состояния не работают так, как должны для всех пользователей. Не использование всех трех селекторов создает проблемы доступности для многих пользователей только для клавиатуры, которые физически не могут использовать мышь. Я приглашаю вас принять вызов #nomouse (nomouse dot org).