Характеристики свойства
В каких браузерах работает?
8.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
В каких версиях CSS используется?
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
- | + | + | + |
Для чего используется?
Псевдокласс навешивает стилевое оформление тем элементам, которым был присвоен фокус. В качестве примера может послужить поле в форме, по которому кликнули мышкой или в котором установился курсор (что в принципе одно и тоже).
Как правильно задавать?
селектор:focus { … }
Какие могут быть значения?
Нет.
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>focus</title> <style> #form .feild:focus { background: #c3c3c3; border: 1px solid #4757c8; } .form-item { margin-bottom:10px; } .label { width:80px; display:block; } </style> </head> <body> <form method="post" id="form"> <div class="form-item"> <span class="label">Логин:</span> <input type="text" class="feild"> </div> <div class="form-item"> <span class="label">Пароль:</span> <input type="password" class="feild"> </div> <p><input type="submit" value="Войти" /></p> </form> </body> </html>
По итогу получаем
Тип CSS свойства:
Псевдоклассы