CSS псевдокласс :focus

CSS селекторы

Значение и применение

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

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

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
:focus4.02.09.63.18.012.0

CSS синтаксис:

:focus {
блок объявлений;
}

Версия CSS

CSS2

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Псевдокласс :focus</title>
<style type = "text/css"> 
input.test1:focus {
background-color: orange; 
}
input.test2:focus {
background-color: khaki; 
}
</style>
</head>
<body>
<form>
Имя: <input type = "text" class = "test1" ><br><br>
Фамилия: <input type = "text" class = "test2" >
</form>
</body>
</html>

Результат:

Имя:

Фамилия:

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