CSS Focus: Enhancing User Experience with Pseudo Class

CSS focus - это псевдокласс, который применяется к элементу, когда он получает фокус (когда пользователь кликает на элементе или перемещает фокус на элемент с помощью клавиатуры). Это позволяет зрительно выделить элемент и сообщить пользователю, что он находится в фокусе.

Пример использования псевдокласса focus на кнопке:

HTML:

html
Нажми меня

CSS:

css
button:focus {
  outline: none;
  background-color: #4CAF50;
  color: white;
}

Когда пользователь нажимает на кнопку или перемещает на нее фокус с помощью клавиатуры, фон кнопки становится зеленым, а текст белым. Мы также удаляем контур фокуса с помощью свойства outline.

Еще один пример использования псевдокласса focus - это добавление стиля к формам:

HTML:

html
Ваше имя:

CSS:

css
input:focus {
  border: 2px solid #4CAF50;
  box-shadow: 0 0 5px rgba(76,175,80,0.5);
}

Когда пользователь переходит на поле ввода с помощью мыши или клавиатуры, поле ввода получает зеленую рамку и тень.

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