Браузер |
 Internet Explorer |
 Chrome |
 Opera |
 Safari |
 Firefox |
|||||||||||||||
Версия |
6.0 |
7.0 |
8.0 |
9.0 |
2.0 |
3.0 |
4.0 |
5.0 |
9.2 |
9.6 |
10 |
2.0 |
3.1 |
4.0 |
5.0 |
2.0 |
3.0 |
3.6 |
4.0 |
|
Поддержка |
 |
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| CSS | CSS2+ |
| Применяется | К элементам, которые могут получить фокус (<A>, <INPUT>, <SELECT> и <TEXTAREA>) |
| Ссылка на спецификацию | открыть в новой вкладке |
элемент:focus { ... }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>focus</title>
<style type="text/css">
#enter .label {
width: 80px; /* Ширина блока с текстом */
float: left; /* Расположение в одну строку с полем */
text-align: right; /* Выравнивание по правому краю */
}
#enter .form-text {
width: 240px; /* Ширина поля */
margin-left: 10px; /* Расстояние между полем и текстом */
border: 1px solid #abadb3; /* Рамка вокруг текстового поля */
padding: 2px; /* Поля вокруг текста */
}
#enter .form-item {
margin-bottom: 5px; /* Отступ снизу */
}
#enter .form-text:focus {
background: #ffe; /* Цвет фона */
border: 1px solid #29B0D9; /* Параметры рамки */
}
#enter p {
margin-left: 90px; /* Сдвиг вправо */
}
</style>
</head>
<body>
<form action="login" method="post" id="enter">
<div class="form-item">
<span class="label">Логин:</span>
<span class="field"><input type="text" name="login" value="" class="form-text" /></span>
</div>
<div class="form-item">
<span class="label">Пароль:</span>
<span class="field"><input type="password" name="pass" class="form-text" /></span>
</div>
<p><input type="submit" value="Войти" /></p>
</form>
</body>
</html>
