CSS focus: создание интерактивных элементов с помощью :focus псевдокласса

HTML теги могут использоваться для отображения кода с помощью highlight.js. Вот текст:

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

Один из наиболее распространенных случаев использования :focus - это стилизация формы при вводе текста. Например, вы можете изменить цвет границы или фона введенного текстового поля, чтобы сделать его более заметным и акцентированным на странице.

Вот пример кода, который стилизует текстовое поле при фокусировании на нем:

input[type="text"]:focus {
  border: 2px solid #ff0000;
  background-color: #f8f8f8;
}

В этом примере мы используем атрибут-селектор [type="text"], чтобы выбрать только текстовые поля. Когда поле получает фокус, применяются стили, указанные внутри блока с селектором :focus. Граница становится красной, а фоновый цвет - светло-серый.

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

button:focus {
  outline: none;
  background-color: #008000;
  color: #ffffff;
}

a:focus {
  text-decoration: underline;
}

В первом примере мы стилизуем кнопку при фокусировке на ней. Мы удаляем стандартный контур (outline), изменяем цвет фона на зеленый и цвет текста на белый. Это может быть полезно, чтобы подчеркнуть активное состояние кнопки.

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

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

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