Сам :focus часто використовується як сигнал користувача, що елемент готовий до роботи. Браузер Chrome, наприклад, до поля форми, що отримав фокус, додає кольорову рамку (мал. 1).
Мал. 1. Поле з фокусом і без
Щоб змінити вигляд полів форми і зробити їх однаковими в різних браузерах, задамо колір рамки біля поля для пошуку, а при отриманні фокусу поміняємо колір на синій (приклад 1).
Приклад 1. Рамка при отриманні фокусу
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:focus</title> <style> [type="search"] { padding: 4px; /* Поля навколо тексту */
border: 1px solid gray; /* Сіра рамка */
}
[type="search"]:focus { outline: none; /* Забираємо контур */
border-color: blue; /* Синя рамка */
}
</style>
</head>
<body> <form action="/example/handler.php"> <input type="search" autofocus>
</form>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Поле з синьою рамкою
Chrome до полів форми при фокусі додає властивість outline, за рахунок цього і виходить кольоровий контур. Прибираємо його через значення none.