Псевдокласс focus
Здравствуйте, сегодня я предлагаю Вам познакомиться с псевдоклассом focus. Данный псевдокласс предназначается для элементов, которым был получен фокус. Самый простой пример элемента, который может получить фокус, это создать текстовое поле, и установить на него курсор мыши, таким образом, данный элемент получит фокус, и к нему можно будет применить CSS стили. Осталось только разобрать пример работы данного псевдокласса.
<html>
<head>
<title>Псевдокласс focus</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<form name="my_form" action="#" method="post">
<span>Логин:</span>
<input type="text" name="login" />
</form>
</body>
</html>
К текстовому полю применяем изучаемый псевдокласс:
input {
margin: 0 10px;
}
input:focus {
border: 1px solid #29B0a9;
width: 200px;
}
Я думаю, что вы уже поняли, какой будет результат выполнения кода, однако по традиции покажу изображение и напишу немного пояснений:
Мы создали текстовое поле, для которого изначально задали отступ с левой и справой стороны, чтобы оно не располагалось рядом с тегом span. И вторым делом мы задаем псевдокласс focus, в котором указываем, что при появлении фокуса, у нас появится рамка в один пиксель определенного цвета, а также мы установим ширину поля равную 200 пикселей. Если фокус у элемента пропадает, то соответственно стили тоже отменяются, и текстовое поле принимает стандартный вид. Вот и все, что можно рассказать о данном псевдоклассе, он обязательно пригодится Вам в вашей практике. До встречи!
